Blur placeholder stay visible with JavaScript disabled

[hlubek]

What version of Next.js are you using?

11.1.0

What version of Node.js are you using?

12.22.1

What browser are you using?

Chrom, Firefox, Safari

What operating system are you using?

macOS

How are you deploying your application?

next dev, next start

Describe the Bug

When rendering an image with next/image that has a blur placeholder set:
If JavaScript is disabled in the browser, the img tag with blur placeholder as a background is shown on top of the noscript image. See this screenshot:

And this is the DOM showing that the later img overlaps the noscript img:

We could solve this with some CSS trickery like:

noscript + img[data-nimg] {
    visibility: hidden;
}

But I think it would be best to change the order of both elements (but it's not clear to me if the order is on purpose here).

Expected Behavior

No blur placeholder should be visible when images are loaded with JavaScript disabled.

To Reproduce

• Open the placeholder example in https://github.com/vercel/next.js/blob/master/examples/image-component/pages/placeholder.js
• Disable JS in the browser, reload the page
• The blur placeholder should stay visible on top of the actual image

[hlubek]

... I noticed an additional case where the Image has priorityset: no noscript will be rendered in this case and only an img tag with blur placeholder in background is visible with JS disabled.

[styfle]

But I think it would be best to change the order of both elements (but it's not clear to me if the order is on purpose here).

Why would the order matter?

I think the issue is that the blurStyle is applied on the initial page load and then we use JS to remove the blur styles when the image loads. When scripts are disabled, then we can never remove the blurStyle.

However, we're not adding the blurStyle to the <noscript> image so I don't think changing the order would affect anything.

next.js/packages/next/client/image.tsx

Line 630 in e920dbc

style={{ ...imgStyle, ...blurStyle }}

[styfle]

I see what you mean about changing the order since the second image will overlay on top of the first.

This should fix it: #28269

Thanks!

[styfle]

This is fixed in v11.1.1-canary.12.

You can try it out today with yarn add next@canary, thanks!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.