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.
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
Blur placeholder stay visible with JavaScript disabled #28251
Comments
... I noticed an additional case where the |
Why would the order matter? I think the issue is that the However, we're not adding the next.js/packages/next/client/image.tsx Line 630 in e920dbc
|
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! |
This PR does a few things: - Moves `<noscript>` usage below the blur image since so that the `<noscript>` image renders on top of the blur image - Remove the `isVisible` check for `<noscript>` since we can't rely on client-side JS - Add `loading=lazy` to the `<noscript>` image to take advantage of native lazy loading (can't rely on JS lazy loading) Fixes #28251
This is fixed in v11.1.1-canary.12. You can try it out today with |
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. |
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 thenoscript
image. See this screenshot:And this is the DOM showing that the later
img
overlaps thenoscript
img:We could solve this with some CSS trickery like:
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
The text was updated successfully, but these errors were encountered: