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
Image shows blank/disappears between blur placeholder and final image in Firefox (next/image
with placeholder="blur"
) for v13.1.2
#36288
Comments
next/image
with placeholder="blur"
)next/image
with placeholder="blur"
)
next/image
with placeholder="blur"
)next/image
with placeholder="blur"
)
It seems to be the normal behavior of virtual dom. |
next/image
with placeholder="blur"
)v12.1.7-canary.3
] Image shows blank/disappears between blur placeholder and final image in Firefox (next/image
with placeholder="blur"
)
I don't really get your point - as described in the issue, this does not happen in Chrome, only in Firefox, so it probably has nothing to do with the virtual DOM. |
I'm also having this issue in Firefox (It's working fine in Chrome) Using next 12.1.5 |
v12.1.7-canary.3
] Image shows blank/disappears between blur placeholder and final image in Firefox (next/image
with placeholder="blur"
)v12.1.7-canary.3
Image shows blank/disappears between blur placeholder and final image in Firefox (next/image
with placeholder="blur"
)
v12.1.7-canary.3
Image shows blank/disappears between blur placeholder and final image in Firefox (next/image
with placeholder="blur"
)next/image
with placeholder="blur"
) for v12.1.7-canary.3
Please verify that your issue can be recreated with Why was this issue marked with the
|
I upgraded my reproduction repo to Next.js The full white placeholder as described initially is gone for this version, but there's a new behavior: The image is loaded in chunks and shows a white background in the meantime. Not sure if this is expected, maybe this is the default browser behavior? |
next/image
with placeholder="blur"
) for v12.1.7-canary.3
next/image
with placeholder="blur"
) for v13.1.2
This issue has been automatically closed because it wasn't verified against next@canary. If you think it was closed by accident, please leave a comment. If you are running into a similar issue, please open a new issue with a reproduction. Thank you. |
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Verify canary release
Provide environment information
What browser are you using? (if relevant)
Firefox 99.0.1 (64-bit)
Describe the Bug
When using Firefox,
next/image
andplaceholder="blur"
, the transition between a blur placeholder and the final image shows blank space in between. The blur placeholder just disappears before the final image is there.This was first mentioned in this issue:
#30128 (comment)
..and supposed to be fixed in
v12.1.5
:#35889
..but even with version
12.1.7-canary.3
, the issue remains.blurred image -> blank -> final image
Expected Behavior
The placeholder keeps being visible until the final image is shown.
This is only an issue in Firefox - Chrome doesn't show this blank space between the placeholder and the final image.
To Reproduce
Deployed at: https://nextjs-image-bug.vercel.app/
Here is a reproduction repo, it just uses an image from Imgur.com and a static blur URL.
12.1.7-canary.3
npx create-next-app@latest --ts --use-npm .
npm run build && npm run start
The text was updated successfully, but these errors were encountered: