Placeholder not disappearing after page load

[SalazarJosh]

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:

1. The placeholder is supposed to disappear
2. The placeholder is the first child <div> in the resulting HTML

Here's the resulting HTML from the <GatsbyImage> component

<div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained">
    /* IS THIS THE PLACEHOLER ??? */
    <div style="max-width:920px;display:block">
        <img alt="" role="presentation" aria-hidden="true" ...>
    </div>
    <div aria-hidden="true" data-placeholder-image="" style="opacity: 0; transition: opacity 500ms linear; object-fit: cover;"></div>
    <picture>
        <source .... />
        <img .... />
    </picture>
    </noscript>
</div>

Breaking this down, the first child <div> element has an <img> child that has role="presentation" and aria-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 the object-fit: cover; and any other position styling doesn't work because the placeholder has a display:block;. After the page renders, if I delete the placeholder <div> the image scales properly to respect the object-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 the object-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).