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/future/image safari border fix make all lazy loaded images bordered #40615
Comments
Also I noticed, that you apply styles after image was loaded
Why you don't added |
@styfle maybe, but how to figure out now? |
Built a code sandbox with the proposed workaround, still getting the borders in Safari. Did anyone else find a workaround or able to spot what I did wrong? https://codesandbox.io/p/sandbox/pensive-babbage-mfmhn2?file=%2Fpages%2Findex.tsx Screen.Recording.2022-11-11.at.18.23.00.mov |
On safari the new next image has a white border when loading. See: vercel/next.js#40615
Did you find a solution? |
@nikkizol the css was updated, see: https://nextjs.org/docs/api-reference/next/image#known-browser-bugs |
I see the same border issue on Chrome for iOS for what it's worth. |
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)
Safari 15.5
How are you deploying your application? (if relevant)
No response
Describe the Bug
I used next future image
I used hack to fix border on Safari 15+ when images which use loading="lazy" has white border while loading.
Now I see in Safari 15 and ALL images which not have
priority
have 0.5px transparent (white if light background and black if dark) aka border.Expected Behavior
Expected behavior - css hack needed to be applied only for images in
loading
state.Without this css styles lazy loaded images shown correctly
Link to reproduction
https://codesandbox.io/p/github/7iomka/effector-react-form-flow/draft/sweet-goldberg?file=%2Fsrc%2Fapp%2Fui-provider%2Fapp-global-styles.tsx&selection=%5B%7B%22endColumn%22%3A11%2C%22endLineNumber%22%3A14%2C%22startColumn%22%3A11%2C%22startLineNumber%22%3A14%7D%5D
To Reproduce
Open Demo in Safari
You can see white border on images loaded in thumbs carousel
You can disable fix from styles (
src/app/ui-provider/app-global-styles.tsx
) to show that this fix caused issue.Of course, I can use
priority
, but, if my images is located below the fold, this is not a solution, and it can't be applied to all images.The text was updated successfully, but these errors were encountered: