Flickering and shearing on transform-heavy pages

NEW
Unassigned

Status

()

Core
Graphics
4 years ago
4 years ago

People

(Reporter: secretrobotron, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

4 years ago
Recently, I built this experiment: http://secretrobotron.github.io/windy-scroll/ . Scrolling will affect a tweened transform (translate + rotate) on a large container in the page.

It doesn't run particularly efficiently, but I noticed that it renders without any problems on desktop, but has a /lot/ of trouble on mobile. Eventually, the render completes and shows what's expected, but for a few seconds after scrolling, you can see Firefox struggle to apply the transforms as it appears to re-render the page at a handful of different scales and angles, often shearing the result -- and this is the part I'm unsure about.

FTR, Chrome's mobile browser renders the page properly, but slowly (as expected).

It's fair to say this page should be optimized, but IMO, it's simple at its core. I'm pretty curious about why Firefox appears to have so much trouble.
Component: Graphics, Panning and Zooming → Graphics
OS: Mac OS X → Android
Product: Firefox for Android → Core
Hardware: x86 → ARM
You need to log in before you can comment on or make changes to this bug.