1851466 - Decreasing frame rate in Firefox on macOS when using ctx.filter blur effect

Status: UNCONFIRMED

(Core :: Graphics: Canvas2D, defect, P3)

Description

[yyy161073]

Attachment: index.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/117.0

Steps to reproduce:

It happens in Firefox 117, 118 and 119 (beta and nightly). It is tested on two MacOS 16 M1 and obtained the same result, in which one of them runs on a freshly downloaded firefox. It is tested on a Windows Surface laptop and the issue did not occur. Here are the steps to reproduce:

1. create a function with reqestAnimationFrame
2. each time the function is called, clear the canvas with clearRect and increase the blur radius. Draw any shape.
3. record the gap between each frame to work out the frame rate
4. run the function and wait

There is a file attached the includes the function. Run the draw() function in the console and observe the result.

Actual results:

• All squares mentioned are ctx.fillRect(x, y, 100, 100) with color black.
• blur refers to the blur radius measured in px.

If ctx.filter blur effect increase 1px each time the function is called and there is a one square drawn on the canvas, which canvas.height = window.innerHeight and canvas.width = window.innerWidth, the frame rate remains around 120hz (8ms per frame) until when the blur is around 60. It will start fluctuate between 60 (16.6ms per frame) and 120hz. When the blur is over around 80, it will fluctuate between 40hz (25ms per frame) and 30hz (33.3ms per frame), ocassionally reaching 24hz (41.6ms per frame).

If the increase in blur stays the same but five squares are drawn, the frame rate starts off with 120hz until blur is 34/35. It decreases to 60hz and the gap between frames increases by 8-9 ms for every 10 frames until it reaches 100-108. Decreasing the frame rate significantly from 120hz to 10hz.

Expected results:

The frame rate should have stayed at 120hz or at least if the blur becomes too much, the frame rate should decrease a lot slower than it is now, which is proven possible in other browsers like chrome and opera.

Comment 1

[Brad Werth [:bradwerth]]

Can confirm this performance issue. Lee, would you see if there's anything we can do here to maintain framerate during large blurs?

Comment 2

[Lee Salzman [:lsalzman]]

We don't accelerate filters in Canvas2D except in the D2D backend. To rectify that would be an extremely large undertaking, unless it already aligns with the SVG filter work Ashley is already doing somehow.

Comment 3

[Lee Salzman [:lsalzman]]

Can you get some profiles from the Firefox profiler using the Graphics preset showing the overhead?

Comment 4

[yyy161073]

(In reply to Lee Salzman [:lsalzman] from comment #3)

Can you get some profiles from the Firefox profiler using the Graphics preset showing the overhead?

Here is the link to the profile captured using the Graphics preset:
https://share.firefox.dev/3ErNVNF

Comment 5

[yyy161073]

(In reply to yyy161073 from comment #4)

(In reply to Lee Salzman [:lsalzman] from comment #3)

Can you get some profiles from the Firefox profiler using the Graphics preset showing the overhead?

Here is the link to the profile captured using the Graphics preset:
https://share.firefox.dev/3ErNVNF

The profile above is the one when five squares are drawn.
For reference, this is one if only one is drawn:
https://share.firefox.dev/3ExTB8M

Comment 6

[Lee Salzman [:lsalzman]]

Yep, it looks like most of the overhead is coming from trying to process the blur filter in software, in the heart of the blurring code specifically. At least now we have a good confirmation.

Comment 7

[Ashley Hale [:ahale]]

I am not sure if canvas can benefit from my SVG filter work - it would be nice if it can. If it qualifies as a regular filter on a picture on the Gecko side it should work with my patch, but I haven't tested this kind of content yet.