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
next/image blur placeholder with conditional rendering is taken down too early in Firefox #30128
Comments
This might be a difference with the way Firefox resolved next.js/packages/next/client/image.tsx Lines 260 to 268 in c4e26ab
Would you like to submit a PR to fix it? |
Theres a similar bug reported in #34697. It seems that Firefox implements |
That's what I suspected too, thx for you update! |
I hope this is related, but there's also a problem of a blank image while the blur placeholder transitions to the real image. I couldn't see the bug for the blurred placeholder in your repro, @yfhui, so here is another one that uses a remote image (from Imgur.com). You can see the bug in action: blurred image -> blank -> final image 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.
This is only an issue in Firefox - Chrome doesn't show this blank space between the placeholder and the final image. |
@bennettdams I noticed this issue too! but I am not sure if it's related to the Firefox bug mentioned above |
It doesn't happen in Chrome, that's why I posted it in this issue - but maybe it's worth to keep this as a separate issue, maybe someone from the team could let me know? |
This should be fixed in PR #35889 |
…35889) ## History In PR #24153, `placeholder=blur` was added and it set `element.style.backgroundImage = 'none'` instead of using react state to re-render. Then in PR #25916, a delay was added to handle removing the blur placeholder. Then in PR #25994, `img.decode()` was utilized but we found this caused problems in Firefox in #26011. ## Today This PR changes the the blur placeholder removal to use react state to re-render. This _should_ prevent Firefox from erroring although we should probably keep the catch() just in case. This was pointed out when React 18 caused subtle differences in Firefox in this comment #30128 (comment)
One issue #30128 (comment) is fixed can you can try it on canary with The original issue #30128 (comment) still fails and seems to be related to be either That being said, the blur placeholder is only acting up on Firefox when its conditionally rendered. Images that are rendered during page load seem to work fine with the blur placeholder. |
…35889) ## History In PR #24153, `placeholder=blur` was added and it set `element.style.backgroundImage = 'none'` instead of using react state to re-render. Then in PR #25916, a delay was added to handle removing the blur placeholder. Then in PR #25994, `img.decode()` was utilized but we found this caused problems in Firefox in #26011. ## Today This PR changes the the blur placeholder removal to use react state to re-render. This _should_ prevent Firefox from erroring although we should probably keep the catch() just in case. This was pointed out when React 18 caused subtle differences in Firefox in this comment vercel/next.js#30128 (comment)
What version of Next.js are you using?
11.1.2
What version of Node.js are you using?
16.9.1
What browser are you using?
Firefox
What operating system are you using?
Windows
How are you deploying your application?
Vercel
Describe the Bug
Observation:
onload/onLoadingComplete
function is fired prematurely and hence the placeholder get unsetonload/onLoadingComplete
function is still fired early but it run once. However, the time to run onLoad image is still shorter than the time to load the imageconditional rendering example:
log in Firefox, we could see the first time to execute onLoad function is shorter than the image loading time:
log in Chrome, we could see the time to execute onLoad function is longer than the image loading time(and it only run once):
Expected Behavior
onLoadingComplete/onload should be run once only. And placeholder exists until the image is fully loaded. (Chrome will execute
onLoad
once only and gives the expected behavior.)To Reproduce
A demo is deployed to vercel. Click the button to update the conditional rendering variable. The base code is from
npx create-next-app@latest
. (complete repo)https://test-nextjs-peach.vercel.app/
The text was updated successfully, but these errors were encountered: