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.
This is actually caused by the cost of the gaussian blur filter.
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.
<rdar://problem/103600681>