955596 - Flickering and shearing on transform-heavy pages

Status: RESOLVED WORKSFORME

(Core :: Graphics, defect)

Description

[Bobby Richter [:secretrobotron]]

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.

Comment 1

[Gregory Pappas [:gregp]]

Unable to reproduce in recent versions.