Syntax issue/question #11

beep opened this Issue Apr 23, 2012 · 2 comments

3 participants


Given the following markup:

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

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="" media="(min-width: 400px)" /> -->
    <source src="" media="(min-width: 400px)" />

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.


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

@scottjehl scottjehl closed this in a0a2a12 Apr 23, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment