Firefox WebGL performance is poor *UNLESS* backdrop-filter: blur is used
Categories
(Core :: Graphics: CanvasWebGL, defect)
Tracking
()
People
(Reporter: haxiomic, Unassigned, NeedInfo)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:120.0) Gecko/20100101 Firefox/120.0
Steps to reproduce:
Visit https://lumalabs.ai/capture/4da7cf32-865a-4515-8cb9-9dfc574c90c2 to see WebGL website performing correctly in firefox
Visit the following link to see the same page (the above is an iframe to this page), perform terribly in Firefox
Actual results:
Our WebGL website runs very poorly only in firefox, freezing up the whole computer and rendering 1-2 fps on high-end hardware (whereas it's 120 fps in Safari and Chrome on the same machine).
However, we can fix the issue by using backdrop-filter: blur on the webpage. I first thought this was acting as a high-power use hint for firefox but I'm starting to think it's a deeper threading edge case bug as the whole machine is brought to a crawl in the poor performance case
Expected results:
Both links load exactly the same content performance should be the same on both. One page however adds some UI which uses CSS backdrop-blur, this page performs much much better and does not lockup the machine
|
||
Comment 1•10 months ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Graphics: CanvasWebGL' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Updated•10 months ago
|
|
||
Comment 2•10 months ago
•
|
||
On my windows and macos systems this reduced test case looks great. What platform and hardware are you seeing poor performance on? Can you post the about:support from that device? Thanks!
Seeing it on macOS 13.2.1, M1 Pro Macbook though I had reports from others
The behavior suggests to me a threading issue, what's unusual about this demo compared to most WebGL content is it uses a webworker for a slow sort operation. It seems that the main thread gets blocked on this worker unless css backdrop blur is used somewhere
The poor performance page (super long link) reliably reproduces for me – I've made a video so you can see the experience
Here is a screen recording where I show the two links
https://drive.google.com/file/d/173RoICGxKXllhYGZp3Lfw1KgpIx6q__R/view?usp=sharing
The link that performs well is simply an iframe to the slow page but it adds css backdrop blur
(I have reduced the test case to confirm it the backdrop-blur is definitely the operative trigger that seems to 'fix' the performance though some means)
Here I use the inspector to toggle backdrop-blur on and off and you can see the performance impact immediately
https://drive.google.com/file/d/1Y33G-p2F7k9ytnmMiv73mlAf1ZJGn6rP/view?usp=sharing
To reproduce, the backdrop-blur element must be visible, so I've made it 10x10px
|
|
||
Comment 5•9 months ago
|
||
The severity field is not set for this bug.
:jgilbert, could you have a look please?
For more information, please visit BugBot documentation.
|
||
Comment 6•7 months ago
|
||
@ahale Any ideas why backdrop-blur would help perf? Maybe because it forces synchronization, and without it we are overproducing?
Description
•