User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:83.0) Gecko/20100101 Firefox/83.0
Steps to reproduce:
I created a minimal example to reproduce:
I could reproduce the bug on multiple devices running Windows 10 with Firefox 83.0.
In Firefox 83.0 on Archlinux everything works fine.
In Firefox 82.0.3 on Windows everything works as expected too.
While developing a website with parallax scrolling (using translateZ), I experienced horrible lags a few days ago. While reducing the source code to a minimal example, I accidentally broke the parallax effect, but the performance issues still persist (that's what you can see in the codepen above).
Both the working parallax website and the codepen above, which doesn't have any visible parallax effect now, lag horribly while scrolling and resizing the window.
I did a performance analysis while slowly resizing the window in both 83.0 and 82.0.3 on Windows 10. I attached both results below.
In 82.0.3 the frame rate is constantly at 60 fps. In 83.0 the frame rate is mostly around 5 fps. GPU usage (GTX 1080) is around 10% on 82.0.3 and around 60% on 83.0.
The problem seems to scale with the screen resolution. In a maximized window on a 1440p monitor it's horrible, while it's not very noticeable in a small window.
Note: Even when removing the translateZ lines from the CSS file, resizing is still not 100% smooth as in 82.0.3. However, it doesn't seem to happen exclusively with SVG files. We tried PNGs instead and while the performance was a lot better, there was still a noticeable lag with very large PNGs (again, everything works fine in 82.0.3).
I expect smooth scrolling and resizing at 60 fps like in 82.0.3.