Placeholder not disappearing after page load #39114
Unanswered
SalazarJosh
asked this question in
Help
Replies: 1 comment
-
I noticed the same issue, only in production builds. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I have a GatsbyImage component with the default `object-fit: cover;' behavior, but it's not being recognized due to the placeholder not disappearing. I'm also making these assumptions:
<div>
in the resulting HTMLHere's the resulting HTML from the
<GatsbyImage>
componentBreaking this down, the first child
<div>
element has an<img>
child that hasrole="presentation"
andaria-hidden="true"
. I'm assuming this is the placeholder because of that and because the<img>
is an empty svg. The resulting image, after load, should be the<img>
under the<picture>
.If this is the case, the placeholder
<div>
should disappear, otherwise theobject-fit: cover;
and any other position styling doesn't work because the placeholder has adisplay:block;
. After the page renders, if I delete the placeholder<div>
the image scales properly to respect theobject-fit: cover;
property.In short, I'm trying to get an image to fill the available space without expanding the container. With the placeholder and the
display:block
on it, the container will always be the size of the placeholder. Since we don't have much control over the styling of the placeholder, I cannot get theobject-fit: cover;
to work as expected.Am I overlooking something, or is this a bug? The Gatsby homepage has similar functionality for the images (placeholders stick around with
display: block;
on them).Beta Was this translation helpful? Give feedback.
All reactions