next.js: Next Image does not work properly when used in a horizontally scrolling container
What 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.
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 21 (17 by maintainers)
Commits related to this issue
- Update docs for image `lazyRoot` prop (#34241) - Related to #32774 — committed to vercel/next.js by styfle 2 years ago
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)