1769938 - Mousemove transition has issues with horizontal tracking (Was: Mousemove-driven backdrop-filter effect is worse in Firefox than Chrome)

Status: NEW

(Core :: CSS Transitions and Animations, defect)

Description

[Gregory Pappas [:gregp]]

Attachment: comparison.webm

Steps to reproduce:

1. Set layout.css.backdrop-filter.enabled to true in about:config
2. Navigate to https://cdpn.io/techgirldiaries/fullpage/XWMrbvP
3. Move cursor around

Actual results:
backdrop-filter effect has trouble following cursor.

Expected results:
backdrop-filter effect follows cursor without issue.

https://share.firefox.dev/3LnJ3uc

Comment 1

[Gregory Pappas [:gregp]]

Attachment: getting_stuck.webm

Comment 2

[Brad Werth [:bradwerth] | Out until Feb 2025]

The cursor tracking issue happens independent of the visual effect. Even without the pref turned on, the effect window has odd snapping behavior in Firefox. This is likely a DOM event issue, not a graphics issue.

Can you post a URL for the codepen that shows the JavaScript that is being run in this demo?

Comment 3

[Brad Werth [:bradwerth] | Out until Feb 2025]

(In reply to Brad Werth [:bradwerth] from comment #2)

The cursor tracking issue happens independent of the visual effect. Even without the pref turned on, the effect window has odd snapping behavior in Firefox. This is likely a DOM event issue, not a graphics issue.

And interestingly, the vertical tracking is good, but the horizontal tracking is poor.

Comment 4

[Gregory Pappas [:gregp]]

(In reply to Brad Werth [:bradwerth] from comment #2)

Can you post a URL for the codepen that shows the JavaScript that is being run in this demo?

document.addEventListener("mousemove", function (e) {
  const glass = document.querySelector(".glass");
  glass.style.left = e.offsetX + "px";
  glass.style.top = e.offsetY + "px";
});

Comment 5

[Gregory Pappas [:gregp]]

Attachment: reduced.html

Comment 6

[Edgar Chen [:edgar]]

It seems it is caused by css transition effect, if I remove transition: 0.2s; then black block moves smoothly.
And same as comment #3, the horizontal tracking is still poor even with transition: 0.001s;.

Comment 7

[Boris Chiou [:boris]]

I suspect this is not related to backdrop filter because I still see this issue without backdrop filter

Comment 8

[Boris Chiou [:boris]]

cc some people who might know more about mousemove.

Comment 9

[Hiroyuki Ikezoe (:hiro)]

I don't quite understand what the problem is. The following mouse cursor effect is implemented by setting left and top properties, and the element in question has transition: 0.2s, thus it will apply all transitionable-properties. Thus, the element movement is 0.2s delay basically. What's the problem?

Comment 10

[Brad Werth [:bradwerth] | Out until Feb 2025]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #9)

I don't quite understand what the problem is. The following mouse cursor effect is implemented by setting left and top properties, and the element in question has transition: 0.2s, thus it will apply all transitionable-properties. Thus, the element movement is 0.2s delay basically. What's the problem?

The horizontal tracking is different in quality than the vertical tracking. With attachment 9277372 [details] this is easy to see by making swift circles with the cursor. The rectangle will track vertically during these circular motions, but not horizontally.

Comment 11

[Hiroyuki Ikezoe (:hiro)]

Thanks Brad! Indeed I can see the horizontal tracking is jittering. That's odd. From the perspective of our CSS transition implementation, we don't differentiate top and left properties at all. If I change the transition property to transition: 0.01s step-end, it's more noticeable. There seems to be a bug.

Comment 12

[Mayank Bansal]

This is a css transition bug and not a backdrop-filter bug.