1711616 - Animation in the CANVAS element has started to stutter

Status: RESOLVED WORKSFORME

(Core :: Graphics: Canvas2D, defect)

Description

[Alan]

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0

Steps to reproduce:

I have created several animations using the CANVAS element and window.requestAnimationFrame(draw). Up until recently, the animation has been smooth, and I used the same template to create a new animation routine.

Actual results:

In 88.0.1, I noticed that the new animation was stuttering considerably, as very often it seemed that a previous frame was being redisplayed before the animation resumed. The same issue is now occurring with all the old animation routines that worked just fine before. The animation is smooth in Chrome 92.0.

Expected results:

The animation should have been smooth, as it was in previous versions.

Comment 1

[BugBot [:suhaib / :marco]]

The Bugbug bot thinks this bug should belong to the 'Core::Canvas: 2D' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Timothy Nikkel (:tnikkel)]

Can you use https://mozilla.github.io/mozregression/ to narrow down what change caused this?

Comment 3

[Alan]

I tried to. The issue seems to persist back to July of 2020, but I can see from file timestamps that I wrote animations in August that didn't have the issue, so the problem may be on my system. Is it worthwhile going further back?

I am still running Windows 7, with 0patch installed to keep my system safe, and I can see numerous patches having been applied to all the versions of Firefox since then, including the nightlies downloaded by mozregression. I tried disabling 0patch and restarting Firefox to see if the issue went away, but the animation stuttering persisted. Given my configuration, unless some Windows 10 users are also experiencing the same problem, there may not be any point in pursuing this any further.

Do you have any suggestions for other things I can try to help resolve the issue?

Comment 4

[Timothy Nikkel (:tnikkel)]

If you can post a self contained testcase that exhibits the problem for you, as well as a copy of your about:support.

Comment 5

[Timothy Nikkel (:tnikkel)]

You could also try changing the value of gfx.canvas.remote in about:config (and restarting your browser after you change it) and see if that changes anything.

Comment 6

[Alan]

Attachment: about:support information

Setting gfx.canvas.remote to false does seem to have fixed the issue.

Comment 7

[Alan]

Setting gfx.canvas.remote to false does seem to have fixed the issue.

Comment 8

[Bob Owen (:bobowen)]

(In reply to Alan from comment #7)

Setting gfx.canvas.remote to false does seem to have fixed the issue.

Hi Alan, thanks for reporting the issue.
What we really need to investigate this is a small test case, to try and reproduce the issue ourselves.
If we can't reproduce a profile (using https://profiler.firefox.com/) might be useful.

Comment 9

[Alan]

Attachment: Small test case page with embedded animation script

Comment 10

[Alan]

May have to wait for the stuttering to occur.

Comment 11

[Mayank Bansal]

Smooth for me on Windows.
gpu-canvas: https://share.firefox.dev/3LUc6s2
d2d-canvas: https://share.firefox.dev/4c7Ee5u

Closing a fixed. Lee, please reopen if you disagree.