Bug 241458 – REGRESSION (iOS 15.5): Angular Materials style triggers poor performance on a long scrolling page

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Jesper Bendtsen]

Scrolling and showing content was running smooth with this css on parent div before iOS 15.5:

-webkit-backface-visibility: hidden !important;
-webkit-transform: translate3d(0, 0, 0) !important;

But now it flickers a lot, when the page gets big.

Images are object URLs created with createObjectURL

See this video, about 60 images on the page (Was no problem before)

https://vimeo.com/718669517/ea2c09b281

please help my users complain?

[Jesper Bendtsen]

If I remove all Angular Material inputs on the page that use CSS animation, transition and transform it runs smooth again!

[Alexey Proskuryakov]

Would it be possible to provide a reproducible test case? Seems unlikely that this can be investigated based on a video alone.

[Jesper Bendtsen]

Fair enough I will create a demo page, I will return with url

[Jesper Bendtsen]

Im trying to create an demo to show the problem with same css style applied etc., but is not easy, because the system where the problem occurs is complex...

Demo app:
https://mango-tree-0ed834c03.1.azurestaticapps.net/

The problem do not occur in the demo, super weird... But again is not 100% the same as the system... Is it possible that I can give you access to the test system? I need to create you as user (requires an email address)

[Jesper Bendtsen]

Changed all components to "changeDetection: ChangeDetectionStrategy.OnPush" in the Angular project for using less CPU power.

I'm confused, do not understand what's going on, se this two videos, is exactly the same page.

Chrome on Windows 10
https://vimeo.com/720963827/df4a1e5477

Safari iOS 15.5 (iPad pro 2020)
https://vimeo.com/720965154/b2ba11d77d

[Radar WebKit Bug Importer]

<rdar://problem/95287714>

[Simon Fraser (smfr)]

Can you use Web Inspector timelines to see what is slow? Are you just running lots of script, or is layout or composite slow?

[Simon Fraser (smfr)]

I was able to log in and do some debugging. As you noted, the Angular Materials style is triggering some poorly performing content, causing excessive work on every scroll. For some reason that I don't yet understand, this is much worse on iOS than macOS.

For now I'd advise not using the Angular Materials for buttons etc; choose an alternate style if you can.

[Simon Fraser (smfr)]

This is much worse on iOS because we get a flood of "didScroll" messages to the web process, so update composting layers for lots of small scroll increments.

On macOS, where scrolling and compositing updates happen in the same process, we coalesce via ScrollingTree::m_pendingScrollUpdates.

[Simon Fraser (smfr)]

Pull request: https://github.com/WebKit/WebKit/pull/2790

[EWS]

Committed 253015@main (e7b60434701b): <https://commits.webkit.org/253015@main>

Reviewed commits have been landed. Closing PR #2790 and removing active labels.