Member Avatar for Zorrro

Hi,

I ran into weird issue in Firefox 57.0.2. I have two panels that translate without issue but if I set rotation on container animation plays weirdly. If I set background-color or border on container, it again plays normally. Can somebody please explain what is happening and what changes when we set border or background-color? Any CSS property I can set so it will work properly without background or border?

Demo without background color https://codepen.io/anon/pen/MrpQzj

Demo with background color https://codepen.io/anon/pen/XVMZyg

  • 2 Contributors
  • 6 Replies
  • 233 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by rproffitt

Dani AI

Generated

Short expert note for (and thread): this looks less like costly trig/math and more like a Firefox paint/compositor interaction where a rotated parent + clipping/overflow changes how layers are created or repainted. A near-identical symptom (translate/overflow causing jumpy transitions in Firefox 57) has been reported and discussed online. (stackoverflow.com)

Why that matters: transforms, opacity and a few other properties change stacking/compositing behavior; the browser may promote elements to compositor layers (or not), and small changes (background, border, containment) can flip that decision and alter whether the animation runs purely on the compositor thread or forces repeated paints. That’s why adding a visual property can “fix” the symptom — it changes the painting/compositing rules, not the animation math. (developer.mozilla.org)

Practical tests and safe workarounds to try (small, incremental—watch memory):

/* hint the browser to promote the animating element */
.moving {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0); /* fallback 'layer promote' hack */
}

/* alternative: keep rotation on a visual wrapper, put overflow on an inner wrapper */
.rotated { transform: rotate(1deg); transform-style: preserve-3d; }
.inner  { overflow: hidden; contain: paint; } /* contain:paint isolates paint work (test carefully) */

Use DevTools to confirm: enable “paint flashing” / Layers / Performance to see which areas are repainted or promoted to layers; that will show whether your change moved work from paint to the compositor. If a workaround helps, prefer will-change (set just before the animation) or moving overflow/clipping off the rotated element rather than globally forcing many layers. (james-priest.github.io)

Caution: will-change, translateZ(0) or contain: paint can increase GPU memory and have side-effects (clipping, layout changes). If the bug still reproduces on a recent Firefox build, capture a minimal repro and file it on Bugzilla with steps and a performance trace.

Recommended Answers

All 6 Replies

Member Avatar for rproffitt

Tried it on Firefox 57.0.3. Didn't see any difference. Same result on Opera.

Member Avatar for Zorrro

I just upgraded to 57.0.3 on 64bit windows 8.1, I still see the issue. I tried other forums too but haven't found the answer.

Edited by Zorrro
Member Avatar for rproffitt

I'm on W10 but I didn't see any diff from Firefox on either script. Also looked same on Opera. Maybe it's just not obvious what to look for?

Member Avatar for Zorrro

Well the demo without background has choppy animation which mostly shows up if you hover over the window. If you hover over the elements, it starts playing but mostly starts playing choppy. And after sometime it starts playing normally but then goes crazy.

So far,

  1. Without rotation animation plays normally.
  2. When rotation is added on container, even if it is 1 degree it starts behaving weirdly.
  3. If border or background color is set on container or wrappers then animation plays normally.
  4. If I remove overflow then again animation plays normally.

The issue only happens in Firefox 57.0.2 and 57.0.3, the other forums I tried, I got 1 confirmation of issue but didn't get answer.

Edited by Zorrro
Member Avatar for rproffitt

Maybe I need to see the normal animation? Both examples looked to do the same thing here.

As to why a rotated animation would slow, have you written graphics fill code? To draw a straight line is pretty trivial. Rotate and the math kicks in with sin(), cos(), etc and a performance hit.

Member Avatar for rproffitt

Any progress? Maybe the non-rotated version would let me see something else?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.