Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

CSS transform with z-index stutters only in firefox

  • 10 replies
  • 1 has this problem
  • 8 views
  • Last reply by TyDraniu

more options

Here is the pen: https://codepen.io/Supersudo/pen/PoPweJL (needed to rerun the code)

I have a dropdown inside a dropdown, the when the second dropdown is minimizing, it will ignore the z-index for a second then go back to its style when the animation is done.

I noticed that this only occurs in firefox, I tried it in chromium and worked as expected.

I'm using FF stable v75.0

Here is the pen: https://codepen.io/Supersudo/pen/PoPweJL (needed to rerun the code) I have a dropdown inside a dropdown, the when the second dropdown is minimizing, it will ignore the z-index for a second then go back to its style when the animation is done. I noticed that this only occurs in firefox, I tried it in chromium and worked as expected. I'm using FF stable v75.0

All Replies (10)

more options

I don't think I'm understanding the problem. I open the main menu, then I open and close the dropdown menu. It doesn't look jittery to me on Windows. What do you mean by ignoring the z-index?

(It is weird that the main menu button doesn't close the drop-down if I left that open, but I realize that's not important for current purposes.)

more options

Thank you for responding! Here is the video, I captured the problem.

You need to rerun the code to refresh the pen.

https://streamable.com/0bbmjy

more options

Can't reproduce this issue on Win10.

Do you have Webrender enabled?

more options

TyDraniu Top 25 Contributor said

Do you have Webrender enabled?

I don't know, actually. Where can I find that? If this helps, I have gfx.webrender.all set to false.

more options

OK, go to the about:support page and paste here two first lines of the Graphics section.

more options
  • Compositing - Basic
  • Asynchronous Pan/Zoom - wheel input enabled; scrollbar drag enabled; keyboard enabled; autoscroll enabled

Modified by Mark Lough

more options

It looks like you doesn't use GPU at all, that's why there's a weak performance.

I'm not familiar with Linux.

Try to switch gfx.webrender.all to true and restart the browser.

Modified by TyDraniu

more options

TyDraniu Top 25 Contributor said

Try to switch gfx.webrender.all to true and restart the browser.

That made it work. But I'm working on a website and not everyone has the gfx.webrender.all set to true. Is there a way to make this work programmatically, even without setting the pref to true?

Modified by Mark Lough

more options

Is this a bug in firefox?

more options

I don't think so. You just need any GPU backend to have css transitions with good performance. It can be Webrender, DX9, OpenGL and almost everyone use one of them. And I don't think that Chrome or Edge is better without GPU.