NEW249314
Page hang caused by redrawing blur filter on many elements 
https://bugs.webkit.org/show_bug.cgi?id=249314
Summary Page hang caused by redrawing blur filter on many elements
Diego Ballesteros
Reported 2022-12-14 09:01:39 PST
Repro codepen: https://codepen.io/dballesteros7/pen/PoarMZV It looks like having a bunch of elements in a scrollable container and adding ::after pseudo-elements locks up when scrolling. Without the pseudo-elements it's fine to scroll through them. This seems to be causing the date picker element in google.com/flights and google.com/hotels to lock up in Safari + iOS. To repro in those sites: 1. Open a specific Hotel in Safari, for example: https://www.google.com/travel/hotels/San%20Francisco/entity/ChcItbb3-4TfgMykARoKL20vMDY2MThtcxAB 2. Click on one of the date pickers under "Check availability" and scroll to select a date in the future. Expected: Scrolling is smooth as prices are loading. Actual: Tab locks up and recovers after a few minutes once the loading is finished and the loading placeholders are gone.
Attachments
Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2022-12-14 09:38:27 PST
This is actually caused by the cost of the gaussian blur filter.
Diego Ballesteros
Comment 2 2022-12-14 13:51:38 PST
Thanks for the quick response Simon! One question to understand better the issue and the workarounds we can apply. In my testing I am able to use the blur filter: https://codepen.io/dballesteros7/pen/ExRqPjZ But it's really when I add the ::after element that it starts to lock up. A version where the blur filter is only added after "loading" is started also works: https://codepen.io/dballesteros7/pen/ZERgQQW It's really with the ::after element that it starts to freeze.
Radar WebKit Bug Importer
Comment 3 2022-12-21 09:02:17 PST
<rdar://problem/103600681>
Note You need to log in before you can comment on or make changes to this bug.