search

scottjehl / picturefill

A responsive image polyfill for <picture>, srcset, sizes, and more
http://scottjehl.github.com/picturefill/
MIT License
9.88k stars 1.07k forks source link

Syntax issue/question #11

Closed beep closed 12 years ago

beep commented 12 years ago

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 commented 12 years ago

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

scottjehl commented 12 years ago

Sounds like a picturefill bug to me.

If no sources evaluate true, whatever image that currently exists should be removed. I'll have to look at the source but I think this can be done by deleting the img node, since picturefill creates that node whenever sources are assessed and no img element already exists.

Thanks for reporting. (HI!)

On 4/23/12, beep reply@reply.github.com wrote:

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)" />

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

Reply to this email directly or view it on GitHub: https://github.com/scottjehl/picturefill/issues/11