Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(gatsby-plugin-image): GatsbyImage not displaying image in IE11 #33416

Merged
merged 2 commits into from
Oct 29, 2021
Merged

fix(gatsby-plugin-image): GatsbyImage not displaying image in IE11 #33416

merged 2 commits into from
Oct 29, 2021

Conversation

raresportan
Copy link
Contributor

@raresportan raresportan commented Oct 4, 2021 •
edited

Description

Picture element should not have position relative since there is another container, gatsby-image-wrapper that contains the image.

The fix is applied only for picture elements with class object-fit-polyfill, which is added by objectFitPolyfill only for browsers that don't support the object-fit CSS property (e.g. IE11). The evergreen browsers are not affected by this fix.

Sadly I had to use !important because the position relative is added by objectFitPolyfill as inline style.

Related Issues

Fixes #30053

@wardpeet I see #30053 is assigned to you for a while, hopefully this helps.

@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Oct 4, 2021
@raresportan raresportan changed the title GatsbyImage not displaying image in IE11 fix(gatsby-plugin-image): GatsbyImage not displaying image in IE11 Oct 5, 2021
@cassilup
Copy link

cassilup commented Oct 5, 2021

Great work, @raresportan.

I saw that the tests were failing even before your work.
Is there an open issue with addressing this?

I initially thought that this PR is not ready for review because the checks were failing.

@raresportan
Copy link
Contributor Author

Great work, @raresportan.

I saw that the tests were failing even before your work. Is there an open issue with addressing this?

I initially thought that this PR is not ready for review because the checks were failing.

Sadly the tests fail even on master branch. It would be great to make them pass yes.

This was referenced Oct 5, 2021
Merged
Merged
@cassilup
Copy link

@LekoArts, when you have a moment, can you please help with reviewing this PR? @raresportan has done a great job with it. Thank you! 🍻

@wardpeet wardpeet self-assigned this Oct 21, 2021
@LekoArts LekoArts added topic: media Related to gatsby-plugin-image, or general image/media processing topics and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Oct 22, 2021
@wardpeet
Copy link
Contributor

Thank you for waiting, tested it thoroughly, and works like a charm!

@wardpeet wardpeet merged commit d708d91 into gatsbyjs:master Oct 29, 2021
@wardpeet wardpeet added this to To cherry-pick in V3 Release Hotfixes via automation Oct 29, 2021
wardpeet pushed a commit to herecydev/gatsby that referenced this pull request Oct 29, 2021
@raresportan @wardpeet
fix(gatsby-plugin-image): GatsbyImage not displaying image in IE11 (g…
ef2cbc1 
…atsbyjs#33416)
vladar pushed a commit that referenced this pull request Nov 2, 2021
@raresportan @vladar
fix(gatsby-plugin-image): GatsbyImage not displaying image in IE11 (#…
13e94e8 
…33416)

(cherry picked from commit d708d91)
@gatsbybot gatsbybot mentioned this pull request Nov 2, 2021
Merged
@vladar vladar moved this from To cherry-pick to Backport PR opened in V3 Release Hotfixes Nov 2, 2021
vladar pushed a commit that referenced this pull request Nov 2, 2021
@raresportan
fix(gatsby-plugin-image): GatsbyImage not displaying image in IE11 (#…
35b48f8 
…33416) (#33806)

(cherry picked from commit d708d91)

Co-authored-by: Rares Portan <43433598+raresportan@users.noreply.github.com>
@vladar vladar moved this from Backport PR opened to Backported in V3 Release Hotfixes Nov 2, 2021
@vladar vladar moved this from Backported to Published in V3 Release Hotfixes Nov 2, 2021
axe312ger pushed a commit that referenced this pull request Nov 9, 2021
@raresportan @axe312ger
fix(gatsby-plugin-image): GatsbyImage not displaying image in IE11 (#…
cc7902d 
…33416)
@snyk-bot snyk-bot mentioned this pull request Feb 18, 2022
Open
@snyk-bot snyk-bot mentioned this pull request Jun 6, 2022
Open
@kaocher82 kaocher82 mentioned this pull request Jun 6, 2022
Open
@nidhi42 nidhi42 mentioned this pull request Jun 6, 2022
Open
This was referenced Jun 6, 2022
Open
Open
This was referenced Apr 15, 2024
Open
Open
Open
Open
@MaxMood96 MaxMood96 mentioned this pull request Apr 15, 2024
Open
This was referenced Apr 15, 2024
Open
Open
Open
Open
Open
Open
Open
Open
Open
Open
This was referenced Apr 15, 2024
Open
Open
This was referenced Apr 15, 2024
Open
Open
This was referenced Apr 15, 2024
Open
Open
Open
This was referenced Apr 15, 2024
Open
Open
Open
Open
@impactyogi impactyogi mentioned this pull request Apr 15, 2024
Open
@MaxMood96 MaxMood96 mentioned this pull request Apr 15, 2024
Open
This was referenced Apr 15, 2024
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@wardpeet wardpeet wardpeet approved these changes

Assignees

@wardpeet wardpeet

Labels
topic: media Related to gatsby-plugin-image, or general image/media processing topics
Projects
No open projects
V3 Release Hotfixes
Published
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Gatsby-plugin-image - GatsbyImage not displaying image in IE11
4 participants
@raresportan @cassilup @wardpeet @LekoArts