CSS transform with z-index stutters only in firefox
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)
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.)
Thank you for responding! Here is the video, I captured the problem.
You need to rerun the code to refresh the pen.
Can't reproduce this issue on Win10.
Do you have Webrender enabled?
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.
OK, go to the about:support page and paste here two first lines of the Graphics section.
- Compositing - Basic
- Asynchronous Pan/Zoom - wheel input enabled; scrollbar drag enabled; keyboard enabled; autoscroll enabled
Mark Lough மூலமாக திருத்தப்பட்டது
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.
TyDraniu மூலமாக திருத்தப்பட்டது
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?
Mark Lough மூலமாக திருத்தப்பட்டது
Is this a bug in firefox?
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.