CODEWITHSUNDEEP
htmlcssinternet-explorerpicturefill
amylynn83
amylynn83

Reputation: 187

Picturefill not working in Internet Explorer; not recognizing srcset?

I've used Picturefill to load a couple of images on my web page. They display correctly in Chrome but don't display at all in Internet Explorer 8.

Here is a sample of my code:

<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js/modernizr.custom.11641.js"></script>
<script async="true" src="js/picturefill.js"></script>
<script src="js/respond.js"></script>
</head>

<body>
<div class="wrapper">
    <header class="x-padding inside-b-padding">
        <h1 class="nocontent outline">Baseball for Busy
        People</h1>


    <picture class="logo">
        <!--[if IE 9]><video style="display: none;"><![endif]-->
        <source srcset="images/logo.png" media="(min-width: 750px)">
        <!--[if IE 9]></video><![endif]-->
        <img srcset="images/logo-small.png" alt="Baseball for Busy People">
    </picture>

(I'm including the top part in case my file linking is part of the problem).

I can view the demo in IE 8: http://scottjehl.github.io/picturefill/examples/demo-02.html. But the images on my page aren't working.

Here is what I tried:

  1. I copied and pasted the code from the demo into my page (changing the image paths to absolute) - they did not display.
  2. I added script to create a <picture> element (although I'm using Modernizr, so it should not be needed).

  3. I added a src path to the img tag, which worked, but I read that Picturefill doesn't recommend this.

Upvotes: 3

Views: 3915

Answers (1)

quietbits
quietbits

Reputation: 178

I know this question was asked a long time ago, but maybe this will help others who run into similar issue. I had the same problem where Picturefill images were not loading on my website in browsers that don't support it natively (IE9 - IE11, for example). The fix was to make sure that picturefill() was called when the element was added to the page (I called it in a directive in Angular, and componentDidMount in React).

Upvotes: 6

Related Questions