Created attachment 442579 [details] Screencapture Steps to reproduce: 1. Rotate your iPhone to landscape orientation 2. Open https://smartslider3.com/bugs/webkit/bganimlag/ 3. Swipe left and right to trigger the animation What's went wrong? Animation lags and sometime the page crashes and reloads. Also phone starts to getting hot, probably CPU is working really hard. In portrait orientation everything is fine and smooth. Able to reproduce on IOS 14.5 and IOS 15.0.2 See attached screencapture.mov
Repros on Safari 15.1 on macOS 12.0.1 on M1; looks like all its time is spent in compositing and paint.
Created attachment 442676 [details] Layers screenshot The content is making large numbers of layers which are much bigger in landscape, triggering jetsam of the web content process.
mid-animation you have 70 "div#n2-ss-3053 .n2-ss-background-animation .n2-ss-slide-background" elements each of which has translateZ() forcing a layer. That seems a little excessive.
Thanks for checking! Probably it would be better if we would write this "effect" in WebGL canvas.
On iPhone 13 Pro and iOS 15.1, this crashes every time (probably out of memory).
<rdar://problem/84970233>