HTML `<picture>` Element Not Rendering Correctly in IE11 - Image Fallback Issues
I'm updating my dependencies and I'm working on a project and hit a roadblock..... I'm currently working on a responsive image solution using the `<picture>` element to serve different images based on screen sizes. While this works perfectly in modern browsers, I'm running into issues with Internet Explorer 11 where the fallback image is not loading as expected. Here’s the markup I’m using: ```html <picture> <source media="(min-width: 800px)" srcset="large-image.jpg"> <source media="(min-width: 400px)" srcset="medium-image.jpg"> <img src="fallback-image.jpg" alt="Description of image"> </picture> ``` In IE11, it seems to completely ignore the `<source>` elements and does not display the fallback image either. Instead, it just leaves a blank space where the image should be. I’ve checked that my images load correctly when accessed directly through their URLs, and I've also made sure that the `srcset` paths are correct. I even tried wrapping the entire `<picture>` element in a `<div>` and setting its width and height, but to no avail. The console doesn't show any errors, and the network tab confirms that the requests for the images don’t seem to be made. Is there something specific about the `<picture>` element or its attributes that IE11 does not support? Any suggestions on how to ensure a reliable fallback for users on this browser would be greatly appreciated! I’m also considering polyfills, but I’d prefer a pure HTML/CSS solution if possible. Any ideas what could be causing this? I'm working on a microservice that needs to handle this. Any suggestions would be helpful.