Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Syntax issue/question #11

Closed
beep opened this Issue · 2 comments

3 participants

@beep
Collaborator

Given the following markup:

<picture alt="">
    <!-- <source src="med.gif" media="(min-width: 400px)" /> -->
    <source src="med.gif" media="(min-width: 400px)" />
</picture>

I’d expect the image to only load if the viewport is wider than 400px, and then not load (or disappear) if the viewport is below that threshold.

However, this works up to a point: if my viewport’s ~320px, and I make it wider than 400px, the image appears; however, bringing it back down below 400px leaves the image in the source.

Changing the markup to point to a dummy default image fixes the problem, like so:

<picture alt="">
    <!-- <source src="x.gif"> -->
    <source src="x.gif">
    <!-- <source src="http://placehold.it/175x132" media="(min-width: 400px)" /> -->
    <source src="http://placehold.it/175x132" media="(min-width: 400px)" />
</picture>

I realize this may be a picture-related syntax question—what should the proper behavior be here?—rather than a pure picturefill-specific issue. But hey, thought I’d post it anyway. Hi.

@necolas

Agreed. This ties into #1: matching the CSS spec's description of how @media works.

@scottjehl
Owner
@scottjehl scottjehl closed this in a0a2a12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.