Bug 232374

Summary:

iPhone landscape animations lags

Product:

WebKit

Reporter:

Roland Soos <roland>

Component:

Compositing

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

simon.fraser, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 14

Hardware:

iPhone / iPad

OS:

Unspecified

Attachments:

Description	Flags
Screencapture	none
Layers screenshot	none

Description Roland Soos 2021-10-27 05:00:59 PDT

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

Comment 1 Sam Sneddon [:gsnedders] 2021-10-27 22:17:45 PDT

Repros on Safari 15.1 on macOS 12.0.1 on M1; looks like all its time is spent in compositing and paint.

Comment 2 Simon Fraser (smfr) 2021-10-27 23:07:49 PDT

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.

Comment 3 Simon Fraser (smfr) 2021-10-27 23:10:38 PDT

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.

Comment 4 Roland Soos 2021-10-27 23:17:06 PDT

Thanks for checking! Probably it would be better if we would write this "effect" in WebGL canvas.

Comment 5 Alexey Proskuryakov 2021-10-30 17:04:37 PDT

On iPhone 13 Pro and iOS 15.1, this crashes every time (probably out of memory).

Comment 6 Radar WebKit Bug Importer 2021-11-03 05:01:22 PDT

<rdar://problem/84970233>