iOS safari crashes when huge amount of next/image instances are rendered & user is heavily scrolling

[alfrescian]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
Platform: linux
Arch: x64
Version: Ubuntu 20.4.0 LTS Thu Feb 17 2022 02:26:32 GMT+0100 (Mitteleuropäische Normalzeit)

Binaries:
Node: 14.17.0
npm: 7.17.0
Yarn: 1.22.10
pnpm: N/A

Relevant packages:
next: 12.0.11-canary.20
react: 17.0.1
react-dom: 17.0.1

What browser are you using? (if relevant)

iOS Safari 15.3.1

How are you deploying your application? (if relevant)

vercel

Describe the Bug

we use next/image to render a list of product images in our eCommerce platform and noticed the following problem:

when the user has fetched hundreds of products and heavily scrolls up & down, then the current browser tabs crashes and get restarted automatically.

When we use a normal with same srcset, sizes etc then we were not able to reproduce the issue in that case.

there is no detailed crash report or stack trace visible - even a connected desktop safari (devtools, connected device) is not showing any hints.
It simply prints sth like "the website was reloaded because a problem occurred" (german browser: "die Webseite wurde neu geladen, weil ein problem aufgetreten ist")

I was not able to reproduce the issue by using a XCode device simulator or any desktop browser.

I've attached a screencam that shows the error.
https://user-images.githubusercontent.com/1340740/154388757-23f7a91b-88e3-4eb9-a24a-73f40532543c.mov

Expected Behavior

browser does not crash, even with hundreds of next/images instances in the JSX/DOM tree.

To Reproduce

With infiniteQuery (useInfiniteQuery)

I've created a stackblitz instance here: https://stackblitz.com/edit/nextjs-oy8czv?file=pages/index.js

this stackblitz is also added to github here: https://github.com/alfrescian/nextjs-infinite-images

and deployed to vercel here: https://github.com/alfrescian/nextjs-infinite-images

even more simplified (useQuery)

I've created a stackblitz instance here: https://stackblitz.com/edit/nextjs-nx8f23?file=pages/index.js

this stackblitz is also added to github here: https://github.com/alfrescian/nextjs-images

and deployed to vercel here: https://nextjs-images-eight.vercel.app/

[pfcodes]

Was wondering what was causing the crashing on the project I was working on. I also have a lot of next/images and experience this.

[meotimdihia]

yes, iPhone was crashed when use with Next/Image to load big images.
Because iOS limited RAM usage when loading images. My comic website get a lot of these errors.
You have to optimize images to reduce the image's size.

[unitof]

Seems to be any large number of (or simply large) images with loading="lazy". You can typically trigger it by quickly scrolling or zooming to load many at once. I'm unclear if srcset exacerbates the issue.

(Presently experiencing on a WordPress site, but as someone very familiar with Next and next/image, which generates similar <img/> tag markup.)

Similarly, cannot replicate on Simulator.app, and Developer Console connected to iOS crashes when the pages does, so can't get anything useful out of it.

[std4453]

I am trying to blend between the blurred placeholder and the final image so I stacked an with blurDataURL as src, upon an from next/image. After doing that the page started to crash, at the exact moment when the was mounted and starts to load. (the blurred placeholder was always mounted) And if I remove the placeholder and everything works fine.

I think that next/image uses blurhash for blurred placeholders, which are basically SVG files showing the blurry result. Safari seems to consume a lot of memory displaying those images, adding them somehow exceeds the memory limit and the page crashes.

[styfle]

I forked the repo and upgraded dependencies and it doesn't crash Safari on iOS or macOS.

Try it here: https://nextjs-image-issue-34455.vercel.app

Closing for now. Let me know if you can reproduce on the latest Next.js and we can reopen this issue, thanks!

[github-actions]

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.