[gatsby-remark-images] Remove negative z-index for .gatsby-resp-image-wrapper #1947
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Fixes gatsbyjs#1935 plus the missing half of gatsbyjs#1888
|
Seems legit! Thanks! |
|
Appreciate the thorough research/explanation as always! |
|
Deploy preview failed. Built with commit 1c3583b https://app.netlify.com/sites/using-glamor/deploys/59a47e357960b13763d3fb81 |
|
Deploy preview ready! Built with commit 1c3583b |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #1935 plus the missing half of #1888.
Currently
gatsby-remark-imagesadds an inline style containingz-index: -1forgatsby-resp-image-wrapper. Our (now also optional) wrapper for the latter,gatsby-resp-image-link, does not provide a stacking context of its own. This results in.gatsby-resp-image-wrapperbeing "stacked" relative to the parent element that provides this context.In the case where one of the parent elements of
.gatsby-resp-image-wrapperdefines abackground(color or image), and the stacking context will be provided by another parent of that element with the background,.gatsby-resp-image-wrapperwill be covered by that background of that parent in between itself and the parent providing context. This is very likely to happen (as reported in #1888 and #1935).gatsbyjs.org is not currently affected by this simply because we do not define any background color for one of the parent elements that
.gatsby-resp-image-wrapperare rendered in. If we apply one for e. g..main-body, all content added bygatsby-remark-imageswill be covered.Furthermore, I can't find a reason why we should need
z-indexhere –.gatsby-resp-image-imageshould always display "above" the base64-encoded, blurred background-image defined inline for.gatsby-resp-image-background-image.