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

Recommended Answers

All 6 Replies

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

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.

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?

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.

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.

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, learning, and sharing knowledge.