1772257 - When dragging a card with the mouse, it does not follow the mouse smoothly.

Status: NEW

(Core :: CSS Transitions and Animations, defect, P3)

Description

[Alice0775 White]

+++ This bug was initially created as a clone of Bug #1772176 +++

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

Steps to reproduce:

1. Open https://conorpo.github.io/
2. Drag a card

Actual results:
When dragging a card with the mouse, it does not follow the mouse smoothly.

Expected results:
Dragging a card should move smoothly.
Chrome works as expected.

FWIW,
Firefox 91ESR is also affected.
However, if WebRender is disabled, i.e. Direct3D 11 Compositing, it will move smoothly.

Comment 1

[Alice0775 White]

Attachment: about:support

Screencast: https://youtu.be/CWPf_n5GHNM

Comment 2

[Gregory Pappas [:gregp]]

This looks like the same underlying problem as bug 1769938, transition + MouseEvent. When I removed all the transitions in the Style Editor, tracking seems just fine.

Comment 3

[conor4arms]

Noticed a something that caused it was updating the position too often, in your bug every time the mouse moves the position is updated and transition is restarted, which causes the issue to be really bad. In my case I only update every update funciton (about every 20ms) which helps out the smoothness, not sure why it wasnt working for reporter since I am using same firefox version.

Comment 4

[conor4arms]

Did some testing and using requestAnimationFrame to update element position almost completely negates the issue, especially when a delta check is added to manually throttle FPS. Main source of issue seems to be when the position is updated multiple times between animation frames.

Comment 5

[conor4arms]

One more thing that could be useful, even when there is no delta time check (as in transform is updated every animation frame). Chaning the transition formula to ease-out almost completely fixes the problem for me.

Comment 6

[Hiroyuki Ikezoe (:hiro)]

Okay, what I am assuming that the card has a transform transition when it's dragged, right?

In our implementation, while transform animations are running on the compositor, when mouse is moved, we do flush the animations on the main-thread in order to work hit testing correctly. IIRC chrome doesn't do that stuff.