Scroller memory repro

jantimon/repro-scroller-memory

A long list where every row is its own scroller kills the tab on iOS 18 and later. Around 200 rows is enough. The same phone on iOS 17 renders 5000

The pages below are the same 1000 flex rows of 10 full-width slides, no images and no libraries. They differ only in how the row is made scrollable

Rows per page

Scroll containers and memory

Five pages, the same 1000 rows of ten slides. They differ only in how the row is made scrollable

Filed as WebKit bug 322930

noscroller

Baseline (not scroll containers)

Source code
```
overflow: hidden;
```
iOS 26, iOS 27 Beta iPhone 15 and 17 Pro
✅ no crash tested to 5000 rows

Run noscroller
content-visibility

Baseline with overflow-x: auto and css content-visibility

Source code
```
overflow-x: auto;

/* on the row */
content-visibility: auto;
```
iOS 26, iOS 27 Beta iPhone 15 and 17 Pro
✅ no crash tested to 5000 rows

Run content-visibility
inview

An IntersectionObserver turns a row a scroll container with overflow-x: auto only as long it is in view

Source code
```
overflow-x: auto;
/* only while near the viewport */
```
iOS 26 iPhone 17 Pro
✅ no crash tested to 5000 rows

Run inview
full

Same as baseline but overflow-x: auto. This example crashes the page because out of memory

Source code
```
overflow-x: auto;
```
iOS 15, iOS 16, iOS 17 iPhone SE 2022, 13 and 15
✅ no crash tested to 5000 rows

iOS 18, iOS 26, iOS 27 Beta iPhone 12 Pro, 13, 14, 15, 15 Pro Max, 17 Pro
💥 crashes at 200 rows

⚠️ Crashes only happen on real iPhones, not in the Simulator

Run full

Scroll timelines and frame rate

A separate problem, on a page that survives. The inview page above is its control: same rows, same scroll containers, no timelines

Filed as WebKit bug 322931, alongside the earlier 322283 on shared timeline names

inview

The same page, without any scroll timeline

Source code
```
overflow-x: auto;
/* only while near the viewport */
```
iOS 26, iOS 27 Beta iPhone 14, 15, 15 Pro Max, 17 Pro
✅ 59 fps 500 and 1000 rows

Open inview Run inview (auto scroll)
inview-timeline

As inview, with a scroll timeline reading each row and one timeline name per row

Source code
```
overflow-x: auto;
scroll-timeline: var(--row) inline;
```
iOS 26 iPhone 14, 15, 15 Pro Max, 17 Pro
✅ 50 to 59 fps 500 rows, shorter rows land at the lower end

iOS 26 iPhone 14, 15, 15 Pro Max, 17 Pro
💥 low, 17 to 27 fps 1000 rows

iOS 27 Beta iPhone 15
💥 low, 11 fps 1000 rows

Open inview-timeline Run inview-timeline (auto scroll)

Experiments ran

In addition to the example cases above the following cases were also tested:

CSS on the row	What happens
`overflow-x: auto`	☠️ tab crashes at 250 rows
`overflow-y: auto`	☠️ tab crashes at 250 rows
`overflow: auto`	☠️ tab crashes at 250 rows
`overflow-x: scroll`	☠️ tab crashes at 250 rows
`display: grid` + `overflow-x: auto`	☠️ tab crashes at 250 rows
`display: block` + `overflow-x: auto`	☠️ tab crashes at 250 rows
`overflow-x: auto`, 100 slides per row	☠️ tab crashes at 250 rows
`overflow-x: auto`, 2 slides per row	✅ 5000 rows, no crash
`overflow-x: auto`, slides narrow enough to fit	✅ 5000 rows, no crash
`overflow: hidden`	✅ 5000 rows, no crash

One row

What every row on these pages is built from. Only the two marked declarations differ between the demos

HTML

CSS

.tile { padding: 8px 16px 24px; content-visibility: auto; /* content-visibility only */ contain-intrinsic-size: auto 400px; } .scroller { display: flex; gap: 16px; width: round(down, 100%, 1px); aspect-ratio: 1 / 1; overflow: hidden; overflow-x: auto; /* full + content-visibility */ } .slide { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; } .box { width: 200px; height: 200px; }

Measured on BrowserStack

The experiments ran on a real BrowserStack test device. Each experiment ran 3 times to verify the results:

memorystatus: com.apple.WebKit.WebContent exceeded mem limit: ActiveSoft 1536 MB (non-fatal)
memorystatus: killing_highwater_process [com.apple.WebKit.WebContent] (highwater 100 17s) 8579568KB

Devices: iPhone SE 2022, 12 Pro, 13, 14, 15, 15 Pro Max, 17 Pro. OS versions: iOS 15, 16, 17, 18, 26, 27 Beta

Scroll containers and memory

noscroller

content-visibility

inview

full