Picturefill not working in IE10 on cache clear

Question

I am using <picture> elements, with Picturefill for cross-browser support. In IE10 (it is fine in 9 and 11) it works perfectly on an ordinary page-load, but no image is displayed following ctrl+f5. (If I then open the dev tools or change the zoom, as well as if I do an ordinary refresh, the correct image loads).

I'm using <picture> as follows:

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="http://placehold.it/360x240" media="(min-width: 640px)">
    <source srcset="http://placehold.it/240x180">
  <!--[if IE 9]></video><![endif]-->
  <img alt="" srcset="http://placehold.it/240x180">
</picture>

I have checked Picturefill's demos and even on an example that's very close to the way I'm using <picture> and srcset I can't replicate this issue, so it doesn't appear to be purely a Picturefill bug.

Has anyone else encountered this or have any suggestions for how to fix it? It seems to work if I use src instead of srcset, but I understand it's not recommended to use src with Picturefill as it causes double downloads in browsers that don't support srcset.

alexander farkas alexander farkas · Accepted Answer · 2015-11-04T08:08:33

Does the following pattern work for you:

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="http://placehold.it/360x240" media="(min-width: 640px)">
    <source srcset="http://placehold.it/240x180">
  <!--[if IE 9]></video><![endif]-->
  <img alt="">
</picture>

Picturefill not working in IE10 on cache clear

1 Answers