Поиск в Поддержке

Избегайте мошенников, выдающих себя за службу поддержки. Мы никогда не попросим вас позвонить, отправить текстовое сообщение или поделиться личной информацией. Сообщайте о подозрительной активности, используя функцию «Пожаловаться».

Learn More

CSS transform with z-index stutters only in firefox

  • 10 ответов
  • 1 имеет эту проблему
  • 11 просмотров
  • Последний ответ от 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

Все ответы (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

Изменено 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.

Изменено 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?

Изменено 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.