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
  • 218 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by rproffitt
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.