Images don't show up in IE8 with 1x/2x syntax

[oilvier]

Hi,

I encountered a problem in Internet Explorer 8 (and below).

When using the syntax to display retina images, no images appear in the browser.

<img srcset="http://placehold.it/300x150 1x, http://placehold.it/600x300 2x" alt="Retina" />

I don't see any errors - the code adding the src to the img tag just doesn't seem to be applied.

Here is a fiddle with the test code : http://jsfiddle.net/oilvier/VdbT4/ (I used the code from the demo site to compare with a case where it's working)

If you watch it in IE8, you'll need this link, as jsfiddle interface is not displaying well in IE8 : http://fiddle.jshell.net/oilvier/VdbT4/show/light/

[coliff]

I'd recommend leaving the backwards compatible src= attribute in your code like this:

<img src="http://placehold.it/300x150" srcset="http://placehold.it/300x150 1x, http://placehold.it/600x300 2x" alt="Retina" />

[oilvier]

I'd love to !

But if I leave the src attribute, both 1x and 2x images will be downloaded when on a HDPI screen. That kinda beat the purpose :(

[coliff]

Browsers on Hi-DPI screens which support srcset (such as Chrome) will ignore the src= attribute if there is a relevant srcset image. I've tested and confirmed this.

Safari will download both the 1x and 2x images, but hopefully that'll be fixed with the forthcoming iOS 8 and OS X 10.10.

Back to your original bug report though, this page: http://scottjehl.github.io/picturefill/examples/demo-01.html displays correctly and works well on IE8 and shows the image, but on IE7 it doesn't show the image.

[oilvier]

So there's only one browser that won't download both images. (Chrome vs Safari/Firefox/IE) It's not satisfactory for me.

Regarding my bug, I know that the example on the picturefill's website is working. The bug seems to occur only in the case of retina images.

[scottjehl]

We'll take a look at the bug, but as for using src or not, our recommendation is to omit src and only use srcset.

This is because any browser without srcset or picture support (almost every browser out there) will prefetch the img's src if specified, often causing wasteful overhead.

Of course, this means that if JavaScript fails for any reason in a non-srcset browser, there won't be a fallback image - only alt text.

This is unfortunate, but picturefill 1.2 works fine as well and has a better fallback approach if you need it (with the main downside that it doesn't use a future standard markup pattern).

On May 15, 2014, at 7:13 AM, oilvier notifications@github.com wrote:

So there's only one browser that won't download both images. (Chrome vs Safari/Firefox/IE) It's not satisfactory for me.

Regarding my bug, I know that the example on the picturefill's website is working. The bug seems to occur only in the case of retina images.

— Reply to this email directly or view it on GitHub.

[jorenvanhee]

I'm also having this issue. I'm using conditional comments as a quick fix for now.

<!--[if (gt IE 8)]><!-->
<img class="u-sizeFull" srcset="{{ URL::asset('assets/images/avontuur/klimpark.jpg') }}, {{ URL::asset('assets/images/avontuur/klimpark@2x.jpg') }} 1.5x" alt="">
<!--<![endif]-->
<!--[if (lt IE 9)]>
<img src="{{ URL::asset('assets/images/avontuur/klimpark.jpg') }}" alt="">
<![endif]-->

[Twansparant]

I have the same issue. Can confirm that IE8 doesn't show any image when using the 2x syntax.

[jorenvanhee]

I'm not having this issue anymore in the latest version :) (2.1.0-beta2)

[Wilto]

Can anyone else confirm that this is resolved as of 2.1.0 Beta 2?

[nlenkowski]

I can confirm this is fixed. I had the same problem with retina images not showing up in IE8 in previous versions of Picturefill, after upgrading to 2.1.0 the problem is resolved.

[Twansparant]

after upgrading to 1.2.0 stable the problem is resolved

You mean after upgrading to 2.1.0 version?

[nlenkowski]

Sorry, yes, typo... twas 4am here ;-) Corrected.

[shazahm1]

The syntax shown to be an issue by the OP seems to work just fine for me using 2.1.0. Seems the issue is resolved ... at least for me.

[mike-engel]

It seems like this issue has been resolved with 2.1.0. Recommending we close this one.

[mike-engel]

No comments, so it seems like this one is fixed! Going to close it now. If anyone has further issues with this, we'll go ahead and reopen it.

[jochienabuurs]

I still get this issue, using version 2.3.1. It seems that in order for images to show in IE8, the image tags must be placed within a picture element. According to the explaination on http://scottjehl.github.io/picturefill/ it should be possible to use just an image tag with srcset attribute for retina images. Also, this really good article by Eric Portis (https://ericportis.com/posts/2014/srcset-sizes/) suggest to only use img tags with srcset when dealing with only retina images (no art direction).

This works:

<img srcset="http://placehold.it/300x150 300w, http://placehold.it/600x300 600w" alt="flexiblewidth" />

This doesn't:

<img srcset="http://placehold.it/300x150 1x, http://placehold.it/600x300 2x" alt="Retina" />

While this does:

<picture>
    <img srcset="http://placehold.it/300x150 1x, http://placehold.it/600x300 2x" alt="Retina" />
</picture>

Anybody else can confirm this?

[mike-engel]

@jochienabuurs Is this happening only on IE8?

[jochienabuurs]

@mike-engel I can't verify that now but will do that tomorrow. I've tested the code posted earlier in chrome, Safari (desktop and iOS 8) and IE11 and those all work correct. Will test tomorrow in FF, Opera and IE 9...

[mike-engel]

quick ping to @jochienabuurs to see if you've had time to test this yet.

[jochienabuurs]

I've tested the 2.3.1 version as well as an older version (don't know the number). I can verify that the 2.3.1 version which i've pulled from the dist just a moment ago does not work in IE8.

I've set up a simple test environment: https://github.com/jochienabuurs/polyfill-test

With the 2.3.1 version, i get the following results: IE8 -> image tag without wrapped picture tag shows only alt text; IE9 -> works as intended; IE11 -> works as intended; FF -> works as intended; Chrome -> works as intended; Opera -> works as intended.

I've also tested with an older version, with which i get the following results: IE8 -> art direction doesn't work, but image tag without wrapped picture tag does; IE9 -> art direction doesn't work, but image tag without wrapped picture tag does; IE11 -> works as intended; FF -> works as intended; Chrome -> works as intended; Opera -> works as intended.

The only thing missing from the new version is art direction for IE8 and IE9. Perhaps comparing the two versions I supplied in my test would help u figure out what's wrong?

[aFarkas]

I had no time to look deeper into this. It seems, that pf2.x doesn't recognize that there is a srcset (i.e.: img[pf.ns].srcset is undefined.

However, I can confirm that this bug is fixed in version 3.0: https://rawgit.com/scottjehl/picturefill/afarkas-pf3-proposal/dist/picturefill.js

[mike-engel]

@aFarkas Thoughts on backporting that to 2.x?

[jegtnes]

Seems like this one's been fixed in 2.3. @oilvier, if that's not the case, please re-open this.