Next Image does not work properly when used in a horizontally scrolling container

[agusterodin]

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?

Screen.Recording.2021-12-23.at.2.13.01.PM.mov

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.

Next.Image.Horizontal.Scroll.Bug.mov

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.

[nwongx]

I am using nextjs(12.0.3), chrome( 96.0.4664.110 ) and macOS(12.0.1). I have the same issue but in a vertical scroll for both development (yarn dev) and production (yarn build && yarn start) environment. The UI of mine is an Image component on top of a list of component which contains few Image components. The images in each component in the list are the same. (I have tried both static images and images that are loaded from url.)

It happens when I first load in the page and scroll closely to the bottom (While scrolling down to the bottom, a warning "The resource ${image url} was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally." shows in console.), and back to the top . The Image component on the top and part of images in components nearby the top of the list are disappear. However, when I drag the area where those disappear images are, I can see the image like we drag the image as usual. Also, when I resize the browser window, those disappear images appear again and do not disappear even I scroll to the bottom.

Another investigation, when I remove the image component in the list of component, the image on the top does not disappear when I scroll to the bottom.

[styfle]

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)

[agusterodin]

Do you have an Android device on hand to test?

Just checked again on Android for Chrome version 97.0.4692.87 (latest version as of today) on Google Pixel 5 and issue is still present.

A quick place to test this is at the image gallery at the bottom of this page (right before contact us section)
https://divtechnologies-2bchlqplm-jeffrosen.vercel.app/

the minimal reproduction I provided above also still recreates the issue on Chrome for Android (updated Next to latest version and checked today again).

[agusterodin]

Not sure if this helps either but it seems like scrolling away from the container entirely and then back seems to make the broken images reappear

screen-20220114-113606.mp4

[styfle]

The horizontal scrolling can be achieved by upgrading to the latest version of Next.js (12.0.9) and setting the lazyRoot property to the scroll parent ref.

The Android bug where images disappear is only affecting Chrome (Firefox Mobile works fine) so the bug has been filed here: https://bugs.chromium.org/p/chromium/issues/detail?id=1291415