vercel / next.js

The React Framework
https://nextjs.org
MIT License
126.71k stars 26.94k forks source link

Images not loading in horizontally moving container without mouse movement #63406

Open kev-ac opened 7 months ago

kev-ac commented 7 months ago

Link to the code that reproduces this issue

https://github.com/kev-ac/repro-nextimage-lazyload-scroll-bug

To Reproduce

  1. Start application
  2. Watch the animation without moving the mouse

Current vs. Expected behavior

If the images are scrolling horizontally the next images coming into viewport should be lazy loaded. Without mouse movement it does not work reliably in Chrome and sometimes not at all in Safari.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Wed Feb 21 21:44:43 PST 2024; root:xnu-10063.101.15~2/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 18.18.2
  npm: 9.8.1
  Yarn: 3.6.0
  pnpm: 8.15.1
Relevant Packages:
  next: 14.2.0-canary.28 // Latest available version is detected (14.2.0-canary.28).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Image optimization (next/image, next/legacy/image)

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

No response

kev-ac commented 7 months ago

https://github.com/vercel/next.js/assets/60135953/e6521003-93d2-43b9-bf06-89f6a5e2e710

Reproduction example for Safari. The expected result would be a continuous loop of images.

JesseKoldewijn commented 7 months ago

I've build something similar recently. Will def take a look at this when I'm off work🤙