Bug 322931 – [scroll-animations] One scroll timeline per row drops scrolling to 11 fps and stutters, with unique timeline names

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: Animations

[Jan Nicklas]

Created attachment 481213 [details]
Standalone reproduction with optional auto scroll

A page that with multiple css scroll timelines stutters badly while scrolling

On an iPhone 15 with iOS 26 and 1000 rows I measured 17–18 fps with the timelines
and 59 fps without

Every row uses its own timeline name so this is not the shared name cost from
bug 322283 (where the mainthread freezes for 15 seconds)

I used BrowserStack to test different iPhones and iOS versions (see tables below)
Faster hardware helps but no it feels very laggy on all iPhones with iOS 26 and later


Steps to Reproduce

repro.html is attached: a single file that builds 1000 rows which all use
scroll-timeline

1. On an iPhone running iOS 26 or later open the attached repro.html in a new tab
2a. Scroll down and feel the stutter 
2b. Optional: Click the scroll-down button instead for autoscroll and FPS
3. There is a more detailed reproduction in https://jantimon.github.io/repro-scroller-memory/
   where you can set the amount of rows and compare inview-timeline.html against
   a inview.html control (same version without timelines)


The CSS is the following

    .scroller.is-live { scroll-timeline: var(--row) inline }
    .tile             { timeline-scope: var(--row) }
    .tile::after {
      animation: sweep linear both;
      animation-timeline: var(--row);
    }

every row gets its own name to workaround bug 322283:

    tile.style.setProperty("--row", "--row" + index);


Expected Results

Both scroll at the display refresh rate. The animation is a 4px bar changing
width with no images or libraries behind it


Actual Results

    device              fps without   fps with
    -----------------   -----------   --------
    iPhone 14           59            16
    iPhone 15           59            17–18
    iPhone 15 Pro Max   59            20
    iPhone 17 Pro       59            26–27

All iOS 26, 1000 rows, three runs each

The cost appears suddenly past about 600 rows on an iPhone 17 Pro:

    rows   fps   p90
    ----   ---   -----
    400    59    17 ms
    500    59    17 ms
    600    59    21 ms
    750    43    33 ms
    1000   27    56 ms

For this simple reproduction page the frame rate is flat to 600 rows and then gets worse and worse.
In our realworld eCommerce shop we already saw frame drops already with 100 rows on a page


Regression


iOS 27 Beta is in my measurements worse than iOS 26 on the same iPhone 15 with 1000 rows:

    iOS       build with timelines   fps with timelines   build without   fps without
    -------   --------------------   ------------------   -------------   -----------
    26        35.5 / 35.6 / 42.7 s   18 / 18 / 17         10.9–13.9 s     59
    27 Beta   57.6 / 57.6 / 57.8 s   11 / 11 / 11         13.9 s          59

About 1.5 times slower to build and down to a flat 11 fps.
The page without timelines holds 59 fps on both

[Jan Nicklas]

Created attachment 481214 [details]
Screenshot of the Reproduction after Scrolling - showing 9 FPS

[Radar WebKit Bug Importer]

<rdar://problem/186338516>

[Antoine Quint]

Thanks for filing Jan. The reported regression with iOS 27 is of particular concern.

[Antoine Quint]

I tested with an iPhone 14 Pro running iOS 26.3 and only got 11fps. I'll try with an iPhone 15 to see if I get different data, but could you indicate what version of iOS 26 you used to test to get ~18fps?

Also, did you get these numbers with the standalone reproduction (https://bugs.webkit.org/attachment.cgi?id=481213)?

[Antoine Quint]

I got 12fps with iOS 26.6.1, the latest released version of iOS 26, on an iPhone 15 with https://bugs.webkit.org/attachment.cgi?id=481213. I can't reproduce a performance regression at the moment, but perhaps I'm not looking at the right content.

[Antoine Quint]

I'm seeing 59fps on iPhone 15 with a ToT build, trying to identify when performance would have progressed.

[Jan Nicklas]

Created attachment 481276 [details]
Comparison Table iOS 26.6 vs iOS 27beta

I ran it once again with the attached reproduction file.

The BrowserStack iPhone 15 showed better FPS for iOS 26.6 than for iOS 27 beta over multiple runs

(see attached comparison)

[Antoine Quint]

This progressed with 317376@main, duping this to bug 319589.

*** This bug has been marked as a duplicate of bug 319589 ***