using <picture> tag with Internet Explorer 11

Question

Have been searching the internet for a while and no solution.

I am trying to use slick carousel with the new picture tag, works great in every browser but IE 11. does anyone know about a workaround/polyfill for IE 11?

Ligialignaloes

Answer 1

The <picture> tag is part of HTML5 but on the documentation, the fallback is <img> which will even work on old browsers.

<picture>
   <source media="(min-width: 64em)" src="high-res.jpg">
   <source media="(min-width: 37.5em)" src="med-res.jpg">
   <source src="low-res.jpg">
   <img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
   <p>Accessible text.</p>
</picture>

Marquee

Thanks Zuch, I have different images that loads in different widths, I will have to find a workaround for IE11 – Ligialignaloes

@Ligialignaloes Cant, you just set width and height per image that has different widths? – Marquee

as it is right now, browser chooses the appropriate image depending on the width of the browser window. on IE11, it only loads the default image, ignoring the source tags. So, I will have to only work with one image for IE and position it accordingly. Other option would be write a script to swap images for IE, but I don't think I am going that route. – Ligialignaloes

Answer 2

The standard <picture> polyfill is Picturefill. It should allow the element to work as expected in IE8+.

Gemsbok

The Picturefill polyfill doesn't seem to be actively maintained though – Grouty

Fair, though it's remarkably stable (none of the open issues are particularly concerning) and is in broad use. – Gemsbok