Bug 249314

Summary:	Page hang caused by redrawing blur filter on many elements
Product:	WebKit	Reporter:	Diego Ballesteros <dballesteros7>
Component:	Layout and Rendering	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Normal	CC:	bfulgham, sabouhallawa, simon.fraser, webkit-bug-importer, zalan
Priority:	P2	Keywords:	InRadar
Version:	Safari 16
Hardware:	iPhone / iPad
OS:	iOS 16

Description Diego Ballesteros 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.

Comment 1 Simon Fraser (smfr) 2022-12-14 09:38:27 PST

This is actually caused by the cost of the gaussian blur filter.

Comment 2 Diego Ballesteros 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.

Comment 3 Radar WebKit Bug Importer 2022-12-21 09:02:17 PST

<rdar://problem/103600681>