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?
If I remove all Angular Material inputs on the page that use CSS animation, transition and transform it runs smooth again!
Would it be possible to provide a reproducible test case? Seems unlikely that this can be investigated based on a video alone.
Fair enough I will create a demo page, I will return with url
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)
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
<rdar://problem/95287714>
Can you use Web Inspector timelines to see what is slow? Are you just running lots of script, or is layout or composite slow?
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.
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.
Pull request: https://github.com/WebKit/WebKit/pull/2790
Committed 253015@main (e7b60434701b): <https://commits.webkit.org/253015@main> Reviewed commits have been landed. Closing PR #2790 and removing active labels.