Animation plays weirdly in rotated container

[zorrohere]

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

[Shikkediel]

Very odd, it seems to become glitchy when not hovering the main content window. And it won’t show the animation at all unless you do hover it. Cannot explain why though.

Edit – but I suspect it has to do with the overflow: hidden on one of the elements.

[zorrohere]

Thanks for the reply, it seems to me like a rendering bug? Anywhere I can report it or get answer?

[Shikkediel]

I think it is as well. I’ve googled but couldn’t find the specifics, which would be needed to report it to Mozilla. Stackoverflow might get you a response.

Check out this one by the way, utterly weird – bleeding into the code windows even when scrolling:

codepen.io/anon/pen/XzyWgy

[Shikkediel]

If you wait long enough, it inexplicably snaps back…

[zorrohere]

Looks like Firefox quantum has too many bugs, from developers tools to rendering issues, not forget it just freezes if you open any website with heavy animations.

Anyway, I tried stack overflow but didn’t get response. Tried other forums too but I guess with holidays it will be hard to get answer. I think I will just report it to Mozilla. Thanks.

[Shikkediel]

The post on SO looks like a Tumbleweed badge candidate. Not much luck elsewhere either, I see. Strange that the reply on Daniweb mentions not seeing the issue.

I’ve generally experienced border, transform and overflow having weird interaction. Although I’m not aware of the exact specification causing that. But the fact that changing the background also has an effect, it’s most flabbergasting to me.

Hope you’ll figure it out (please report back if you do).

[zorrohere]

Sure I will report back whenever I figure it out.

Well that guy on Daniweb is always hard to deal with, usually when he responds you just have to go in circles to explain your question, I would just ignore his response.

Pretty impressed and curious how you managed to find my questions on other forums.

[Shikkediel]

No big mystery, I just googled the title of this topic. Sites were in the top results.

[zorrohere]

It can be resolved by using transform-style: preserve-3d; and seems like it is quirk rather than bug.

https://codepen.io/anon/pen/MrpQzj?editors=0110

[Shikkediel]

Thanks for the update. Interesting, I actually did try that one but guess I didn’t put it on the correct element. It also fixes the overflow in the pen I posted. If it’s not a real bug, I’d call it a quirk plus though.

[Author]

Posts