Internet Explorer 8 - wrong-sized images

You can try the weblinc polyfill it supports older IE

First try with the latest dev version, download from the project page, go to picture, settings a select weblinc instead of picture fill

I'm having exactly the same issue, I'm using a flexslider with breakpoints mapped to various image styles. As described above Everything works just fine except for IE8. Breakpoints work fine The flexslider also works fine however in IE 8 the images displayed by the flexslider are always displayed in the fallback style. I have tried to use the latest version of the picture module and use "weblinc" instead of "picturefill" however this caused the issue to spread to all browsers.

So what exactly is going on, In IE8 the images in the flexslider are displayed with the fallback image style and are pushed in the top left corner of the flexslider container. In Chrome or firefox everything works as it should be.

Perhaps this is a config issue however after spending a few days on it, i don't see it. Any tips or suggestions??

Also this is on D7 (7.22) with respond.js, perhaps its usefull to note the i'm including html5shiv.js in IE8.

Any help is greatly appreciated, Kind regards

Can you try it in another theme?
Can you check for any javascript errors?

Thanks for the quick reply,

I sort of got it fixed: One of the problems was that you can apply settings to the flexslider under
admin/config/flexslider and there pick your flexslider. Or you can apply the same kind of settings to the flexslider under admin/structure/views, pick your flexslider view. Apparently something went wrong there.

We noticed that breakpoints and pictures work correctly for any picture not in a flexslider also in IE8 so thats a relieve. Ill post again when i know more.

Is this still a problem?

While not using flexslider (at the moment), I am having a similar issue with IE8 only showing the default image when using PictureFill.

I see the matchMedia polyfill is included with the Picture module and loaded if the Picturefill is used.

The notes about matchMedia (https://github.com/paulirish/matchMedia.js/) say it is also used in Respond.js. I am employing the Zen theme which includes that and I wondered if there is some conflict between the two versions. However, turning off Respond.js does not fix the pictures so that seems to eliminate that.

I see your demo (http://picture7w.h011.attiks.com/node/1) is using the Responsive Bartik theme which also employs Respond.js.but with the WebLinc polyfill. Switching to WebLinc myself, the problem is initially worse as there are now problems with other browsers. It seems likely I have some error in my html which I am hand coding so that I can switch between completely different images as screen size changes. A test demonstrates that, if you only use min-width in the data-media field, the ordering of images matters and differs between Picturefill and WebLinc. Specifying a min-width and a max-width for every intermediate media query solves that problem.

So the following html with WebLinc is what works best for me (width and height attributes removed for clarity).

<span data-picture-group="banner" data-alt="Website banner" data-picture="">
<span data-src="http://path/to/small.jpg"></span>
<span data-src="http://path/to/med.jpg" data-media="all and (min-width: 480px) and (max-width: 959px)">
<span data-src="http://path/to/big.jpg" data-media="all and (min-width: 960px)"></span>
</span>
<noscript><img src="http://path/to/small.jpg" alt="Website banner" /></noscript>
</span>

For some reason, IE8 doesn't respond immediately to resizing, taking two resizes to make a change. I see that there is a similar problem with the demo although it is less easy to detect than in my case as all the images are similar.

In summary, I found

Polyfill        Firefox   IE8

Picturefill       Ok       No    (IE8 shows only default)
WebLinc           Ok       Okish (IE8 Doesn't respond to resize immediately)

I face issue with IE8.
i.e for google chrome and Mozila firefox picture module work perfect but for IE8 responsive images are null while I use picturefill library and WebLinc library is work for me for all browser.

change need to done at http://hostname.com/admin/config/media/picture/settings

Thanks Attiks

Version 2.0 should be able to hanlde IE8

Version 2.0 should be able to hanlde IE8

I've been trying to use version 2.0 but with no success on IE8. This is the code generated for IE8, with sizes attribute (no image):

<picture >
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="xxx/sites/all/files/styles/img_front_custom_user__wide_1x/public/imagens/paginas/banner1.jpg?itok=y-45QKHp 350w" media="(min-width: 1219px)" sizes="(min-width:1219px) 1219px" />
<source srcset="xxx/sites/all/files/styles/img_front_custom_user__normal_1x/public/imagens/paginas/banner1.jpg?itok=PqHSRayG 280w" media="(min-width: 979px)" sizes="(min-width:979px) 979px" />
<source srcset="xxx/sites/all/files/styles/img_front_custom_user__narrow_1x/public/imagens/paginas/banner1.jpg?itok=9aTG4QjF 210w" media="(min-width: 740px)" sizes="(min-width:740px) 740px" />
<source srcset="xxx/sites/all/files/styles/img_front_custom_user__mobile_1x/public/imagens/paginas/banner1.jpg?itok=0-ZL6XdO 290w" media="(min-width: 0px)" sizes="(min-width:0px) 0px, 100vw" />
<!--[if IE 9]></video><![endif]-->
<img srcset="xxx/sites/all/files/styles/img-front/public/imagens/paginas/banner1.jpg?itok=rlklLgTs 280w" title="" />
</picture>

I've also tried breakpoints without success.

After using srcset-polyfill the images shows on IE8 but using the fallback image.

<picture >
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="xxx/sites/all/files/styles/img_front_custom_user__wide_1x/public/imagens/paginas/banner1.jpg?itok=y-45QKHp 350w" media="(min-width: 1219px)" sizes="(min-width:1219px) 1219px" />
<source srcset="xxx/sites/all/files/styles/img_front_custom_user__normal_1x/public/imagens/paginas/banner1.jpg?itok=PqHSRayG 280w" media="(min-width: 979px)" sizes="(min-width:979px) 979px" />
<source srcset="xxx/sites/all/files/styles/img_front_custom_user__narrow_1x/public/imagens/paginas/banner1.jpg?itok=9aTG4QjF 210w" media="(min-width: 740px)" sizes="(min-width:740px) 740px" />
<source srcset="xxx/sites/all/files/styles/img_front_custom_user__mobile_1x/public/imagens/paginas/banner1.jpg?itok=0-ZL6XdO 290w" media="(min-width: 0px)" sizes="(min-width:0px) 0px, 100vw" />
<!--[if IE 9]></video><![endif]-->
<img title="" src="xxx/sites/all/files/styles/img-front/public/imagens/paginas/banner1.jpg?itok=rlklLgTs" srcset="xxx/sites/all/files/styles/img-front/public/imagens/paginas/banner1.jpg?itok=rlklLgTs 280w" picturefill="[object Object]"/>
</picture>

Is this too soon to use version 2 on IE8?

#13 IE8 should just work if the polyfill is loaded in the head of the document (is so by default)

You can check your picture mapping, since you're using a combination of both media queries and sizes, you should be able to reduce it to only use one, so either remove all sizes and just select an image style, or add an empty breakpoint and use sizes on that one.

To be sure IE8 behaces like it should, check the demo page of the polyfill at http://scottjehl.github.io/picturefill/examples/demo-01.html

I just committed a potential fix to the dev version, if you want to test wait 12 hours or use the git version.

Fix only committed to 2.x version

Hi attiks,

Ok, I narrowed picture to one method, now I am using breakpoints and styles. I've installed your patch #16 and now I don't need srcset-polyfill, the images shows on IE8, but stills uses the fallback image. I've explicitly declared <script src="/sites/all/modules/picture/picturefill2/picturefill.js" type="text/javascript"></script> before $styles and $scripts. No success.

I am using, last modules of Picture, Views, CTools and Breakpoints. And yes, demo page of the polyfill works well on IE8.

The problem only appears on IE<10, for IE10 Picture works well.

Code for IE8:

<picture>
  <SOURCE media="(min-width: 1219px)" srcset="xxx/sites/all/files/styles/img_front_custom_user__wide_1x/public/imagens/paginas/banner1.jpg?itok=y-45QKHp 1x" />
  <SOURCE media="(min-width: 979px)" srcset="xxx/sites/all/files/styles/img_front_custom_user__normal_1x/public/imagens/paginas/banner1.jpg?itok=PqHSRayG 1x" />
  <SOURCE media="(min-width: 740px)" srcset="xxx/sites/all/files/styles/img_front_custom_user__narrow_1x/public/imagens/paginas/banner1.jpg?itok=9aTG4QjF 1x" />
  <SOURCE media="(min-width: 0px)" srcset="xxx/sites/all/files/styles/img_front_custom_user__mobile_1x/public/imagens/paginas/banner1.jpg?itok=0-ZL6XdO 1x" />
  <IMG src="xxx/sites/all/files/styles/img-front/public/imagens/paginas/banner1.jpg?itok=rlklLgTs" currentSrc="xxx/sites/all/files/styles/img-front/public/imagens/paginas/banner1.jpg?itok=rlklLgTs">
</picture>

Code for IE10:

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source media="(min-width: 1219px)" srcset="xxx/sites/all/files/styles/img_front_custom_user__wide_1x/public/imagens/paginas/banner1.jpg?itok=y-45QKHp 1x">
<source media="(min-width: 979px)" srcset="xxx/sites/all/files/styles/img_front_custom_user__normal_1x/public/imagens/paginas/banner1.jpg?itok=PqHSRayG 1x">
<source media="(min-width: 740px)" srcset="xxx/sites/all/files/styles/img_front_custom_user__narrow_1x/public/imagens/paginas/banner1.jpg?itok=9aTG4QjF 1x">
<source media="(min-width: 0px)" srcset="xxx/sites/all/files/styles/img_front_custom_user__mobile_1x/public/imagens/paginas/banner1.jpg?itok=0-ZL6XdO 1x">
<!--[if IE 9]></video><![endif]-->
<img src="xxx/sites/all/files/styles/img_front_custom_user__wide_1x/public/imagens/paginas/banner1.jpg?itok=y-45QKHp" 
srcset="xxx/sites/all/files/styles/img-front/public/imagens/paginas/banner1.jpg?itok=rlklLgTs 280w">
</picture>

If you check the source, is there a document.createElement at the top?

You should not add script tags manually.

Looking at the img tag in IE8 it looks like the polyfill did at least do something

Yes, on header zone: <script type="text/javascript"><!--//--><![CDATA[//><!--document.createElement( "picture" );//--><!]]></script>

I've sent you privately a link to a test zone, if it helps.

I tested this with omega 4 theme, with all additional libraries (part of omega sub theme) enabled:

• html5shiv
• pie
• respond
• selectivizr

I also tested the demo (on the original link and hosted on my server) and it does not work.

And I am not the only one, look at: https://github.com/scottjehl/picturefill/issues/262

I also tried the demo, with the libraries listed by you (except for the omega theme), no success. Does your successful test has public access? I could try to find the reason why your example works and the others doesn't.

PS: Correction, IE9 works well, the problem shows only on IE<9

#22 Test site is not public yet, I'll try to set up a minimal test site next week

Waiting for upstream fix

Assuming this is fixed, if not feel free to re-open or create a new issue.