Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Next Image does not work properly when used in a horizontally scrolling container
See original GitHub issueWhat version of Next.js are you using?
12.0.7
What version of Node.js are you using?
16.13.0
What browser are you using?
Chrome (Desktop and Android)
What operating system are you using?
macOS Monterey and Android 12
How are you deploying your application?
Vercel (broken when developing locally with yarn dev as well)
Describe the Bug
There are two issues present:
I am using Next Image inside of a horizontally scrolling container and the lazyBoundary prop isn’t working + on Android Chrome images will permanently disappear once scrolled away from.
Firstly, here is a video screenshot of the network tab in Chrome on desktop. Notice that images do not load until the image is literally in the viewport despite lazyBoundary being set to an arbitrarily high value (in this case 9000px). From what I understand from the docs, the syntax is similar to that of the CSS margin property. This means that I should be able to specify both a vertical and horizontal value via shorthand (ex: 500px 1000px), correct?
Secondly (and way more critically) on Chrome for Android I experience the same lazyBoundary issue but also experience images completely disappearing after scrolling away from them and back to them.
This issue is present when deploying to Vercel as well as developing locally.
Expected Behavior
The lazyBoundary property to be respected in a horizontal container and for images not to disappear on mobile
To Reproduce
https://github.com/agusterodin/next-image-horizontal-scroll-bug-reproduction
Present when running the project via yarn dev AND when deployed to Vercel.
Issue Analytics
- State:
- Created 2 years ago
- Comments:21 (16 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Thanks for reporting this issue! I was able to reproduce lazyBoundary issue here but I haven’t reproduce the Android specific bug.
For the lazyBoundary issue, we need to determine the lazyRoot. I think we’ll need to recursively walking up the DOM starting from the
<img>element up to the first scrollable element and use that as the root for the IntersectionObserver. (related PR)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.