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

[hazuremon]

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.

[egemenu]

Actually object-fit polyfill is working but not in the right way.

Looking forward to any solution here 👀

[LekoArts]

Actually object-fit polyfill is working but not in the right way.

What do you mean by that @egemenu ?

[hazuremon]

Actually object-fit polyfill is working but not in the right way.

What do you mean by that @egemenu ?

I think polyfill is working as well, as the image gets briefly displayed before it disappeared. I am not sure but I suspect it's the lazyload placeholder layer is not swapped out which prevent the image from displaying?

[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]

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! 💪💜

[egemenu]

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; }

This didn't work actually. I guess cause I work with with modular css. So instead of adding like that, I've added it to head of html

<style type="text/css">{`
    picture.object-fit-polyfill {
    position: static!important;
  }
`}</style>

But you're right, this is definitely a dirty solution. Still watching for any proper fix.

[github-actions]

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! 💪💜

[timmywil]

Just to make this unstale, the workaround works, but this should probably be changed in gatsby. It affects <StaticImage> in IE as well.

[github-actions]

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! 💪💜

[timmywil]

This is still an issue. While it has to do with the object-fit polyfill, it may have more to do with gatsby's use of the polyfill. Currently, no <GatsbyImage> or <StaticImage> displays in IE. I'm sure the maintainers are busy, tho, so I will see if I can make a PR.

[github-actions]

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! 💪💜