Gatsby-plugin-image - GatsbyImage not displaying image in IE11

Description

Upgrading from Gatsby-image to Gatsby-Plugin-Image, currently in IE11, it doesn’t seem to be able to display the image with just a blank region. Didn’t find any information on IE11 support or polyfill as this is quite new, assume this is a degradation?

Steps to reproduce

https://github.com/hazuremon/gatsby-bug-repro/ https://eager-saha-ba67b0.netlify.app/ (Open in IE11 will see a blank screen, while seeing an image in all other browsers)

Expected result

What should happen? Display image

Actual result

Briefly shows the lazyload placeholder image before seeing a blank region.

Environment

IE11

Run gatsby info --clipboard in your project directory and paste the output here.

[safesitefacilitiesdev]

If anyone needs a quick and dirty solution to this, I noticed removing ‘position: relative’ from the picture element displays the images in ie11. Doing this with CSS globally, targeting the class the polyfill adds is fairly trivial:

.object-fit-polyfill[style] { position:static !important; }

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜