1719164 - Terrible stuttering of mouse and "drag preview" on https://codepen.io/trending if you click-and-drag on a pen . Hang on Parent Process

Status: NEW

(Core :: Web Painting, defect, P2)

Description

[Mayank Bansal]

1. go to https://codepen.io/trending
2. Scroll down where you will see some pens/demos
3. "Click and drag but do not drop " on a pen/demo
4. If this does not repro on the first demo you try the STR on, try doing on another demo/pen

ER: Usual outline of the content while you click-and-drag stuff on page
AR: Terrible stuttering of mouse

Profile : https://share.firefox.dev/3qOVK8o (look at the parent process)

Comment 1

[Mayank Bansal]

Attachment: bandicam 2021-07-05 19-39-08-791.mp4

Whats funny is that the bandicam screen capture doesnt show the mouse moving when i am click-and-drag on a pen.

Comment 2

[Mayank Bansal]

This is not a WR bug a it repros with D3d11 as well

Comment 3

[Sean Feng [:sefeng]]

The drag and drop operation was being slow. Looks like it was calling some Windows API, and some slow IPC messages.

Comment 4

[Hsin-Yi Tsai (she/her) [:hsinyi]]

The slowness is obvious. I think we should investigate to see what's up.

Comment 5

[Mirko Brodesser (:mbrodesser-Igalia), offline until April 25h]

Works with Chrome. I'd need to spend more time to analyze this properly. Currently, I'm busy with other work.

Comment 6

[Mirko Brodesser (:mbrodesser-Igalia), offline until April 25h]

I couldn't reproduce the issue with the items currently in the "trending" section. However, the item "3d text" there is noticeably slow without using the mouse. At least on my Ubuntu 20.04 machine. On Chrome it's smooth.

So presumably, the slowness isn't drag-and-drop-specific.

Comment 7

[Mirko Brodesser (:mbrodesser-Igalia), offline until April 25h]

Interestingly, left-clicking on the turning text and moving the mouse makes the text turning smoother.

Comment 8

[Mirko Brodesser (:mbrodesser-Igalia), offline until April 25h]

Turning Fission off makes the text turn smoothly.

Comment 9

[Hsin-Yi Tsai (she/her) [:hsinyi]]

A duplicate of a recent filed bug Bug 1731009 ?

Comment 10

[Randell Jesup [:jesup] (needinfo me)]

The "3d text" from comment 6 seems like bug 1731009. I couldn't find the original drag-and-drop test, but the one I did find doesn't seem to have a problem: https://codepen.io/elegantseagulls/pen/eYRgXpd

Comment 11

[Randell Jesup [:jesup] (needinfo me)]

Re-reading the original comment and watching the video, it's not about a demo that uses drag-and-drop, but drag-selecting on a page showing mutliple demos you can click on. Again, though, I don't see any issues with this; no difference between fission and non-fission (Nightly/local m-c build, linux)

Reporter, can you still reproduce? Could you verify the exact steps to do so? Thanks

Comment 12

[Hiroyuki Ikezoe (:hiro)]

Yep, looks like the 3d text issue is bug 1731009.

Comment 13

[Mayank Bansal]

(In reply to Randell Jesup [:jesup] (needinfo me) from comment #11)

Re-reading the original comment and watching the video, it's not about a demo that uses drag-and-drop, but drag-selecting on a page showing mutliple demos you can click on. Again, though, I don't see any issues with this; no difference between fission and non-fission (Nightly/local m-c build, linux)

Reporter, can you still reproduce? Could you verify the exact steps to do so? Thanks

I can still reproduce the issue. The exact steps are whats described in my first comment. As you said, the bug is not about a demo that uses drag-and-drop. The bug is about drag-and-drop on any demo on the trending page. This repros with/without fission.

The issue is that the drag preview is extremely janky. Drag preview is internal to Firefox code, so im surprised that the page can affect that. On Chrome,the drag preview is smooth.

Comment 14

[Hsin-Yi Tsai (she/her) [:hsinyi]]

I still can reproduce this issue on Nightly 94, Windows 10. This occurs on both Fission and non-Fission.

However, as reporter's comment 1, the recordings I got with Game Bar app didn't show the "drag-moving" when I tried to drag. So it's unlikely to see the issue from the recording clips. I will still upload one anyway.

I will try to get profiles.

Comment 15

[Hsin-Yi Tsai (she/her) [:hsinyi]]

(In reply to Hsin-Yi Tsai [:hsinyi] from comment #14)

I still can reproduce this issue on Nightly 94, Windows 10. This occurs on both Fission and non-Fission.

However, as reporter's comment 1, the recordings I got with Game Bar app didn't show the "drag-moving" when I tried to drag. So it's unlikely to see the issue from the recording clips. I will still upload one anyway.

I will try to get profiles.

Okay, I seem to get the pattern of the issue I observed. I guess it's not really about "performance" but maybe more like event propagation and event target determination? Or if the websites does things differently on browsers?

If I tried to start drag from the same position around "view details" button, dragging worked as expected. But if I started to drag from a position far away from the "view details" button, issues occurred. However, in Chrome, no matter which position I chose to start dragging, there was no problem.

Please see the clips I recorded on my phone.

Comment 16

[Hsin-Yi Tsai (she/her) [:hsinyi]]

Attachment: chrome_bug1719164

dragging worked as expected on Chrome. No matter where I started to drag.

Comment 17

[Hsin-Yi Tsai (she/her) [:hsinyi]]

Attachment: firefox_bug1719164.mp4

Dragging didn't work as expected on Firefox, if I started to drag from a position far away from the top-right "view details" button.

Comment 18

[Hsin-Yi Tsai (she/her) [:hsinyi]]

(In reply to Hsin-Yi Tsai [:hsinyi] from comment #15)

(In reply to Hsin-Yi Tsai [:hsinyi] from comment #14)

I still can reproduce this issue on Nightly 94, Windows 10. This occurs on both Fission and non-Fission.

However, as reporter's comment 1, the recordings I got with Game Bar app didn't show the "drag-moving" when I tried to drag. So it's unlikely to see the issue from the recording clips. I will still upload one anyway.

I will try to get profiles.

Okay, I seem to get the pattern of the issue I observed. I guess it's not really about "performance" but maybe more like event propagation and event target determination? Or if the websites does things differently on browsers?

If I tried to start drag from the same position around "view details" button, dragging worked as expected. But if I started to drag from a position far away from the "view details" button, issues occurred. However, in Chrome, no matter which position I chose to start dragging, there was no problem.

Please see the clips I recorded on my phone.

Mirko, any further thoughts?

Comment 19

[Mirko Brodesser (:mbrodesser-Igalia), offline until April 25h]

(In reply to Hsin-Yi Tsai [:hsinyi] from comment #18)

(In reply to Hsin-Yi Tsai [:hsinyi] from comment #15)

(In reply to Hsin-Yi Tsai [:hsinyi] from comment #14)

I still can reproduce this issue on Nightly 94, Windows 10. This occurs on both Fission and non-Fission.

However, as reporter's comment 1, the recordings I got with Game Bar app didn't show the "drag-moving" when I tried to drag. So it's unlikely to see the issue from the recording clips. I will still upload one anyway.

I will try to get profiles.

Okay, I seem to get the pattern of the issue I observed. I guess it's not really about "performance" but maybe more like event propagation and event target determination? Or if the websites does things differently on browsers?

If I tried to start drag from the same position around "view details" button, dragging worked as expected. But if I started to drag from a position far away from the "view details" button, issues occurred. However, in Chrome, no matter which position I chose to start dragging, there was no problem.

Please see the clips I recorded on my phone.

Mirko, any further thoughts?

Still couldn't reproduce the issue on Ubuntu 20.04. Presumably, you use Windows? The reporter does. Perhaps its Windows-specific.

Comment 20

[Mirko Brodesser (:mbrodesser-Igalia), offline until April 25h]

(In reply to Hsin-Yi Tsai [:hsinyi] from comment #14)

I still can reproduce this issue on Nightly 94, Windows 10. This occurs on both Fission and non-Fission.

To be clear, you can not reproduce the stuttering, correct?

However, as reporter's comment 1, the recordings I got with Game Bar app didn't show the "drag-moving" when I tried to drag. So it's unlikely to see the issue from the recording clips. I will still upload one anyway.

I will try to get profiles.

Comment 21

[Mirko Brodesser (:mbrodesser-Igalia), offline until April 25h]

I can reproduce the issue (= the stuttering) on Windows 10. So it seems Windows-specific.

Comment 22

[Mayank Bansal]

I can repro on a build from 2016, so this is not a recent regression

Comment 23

[BugBot [:suhaib / :marco/ :calixte]]

Change the status for beta to have the same as nightly and release.
For more information, please visit auto_nag documentation.

Comment 24

[Mirko Brodesser (:mbrodesser-Igalia), offline until April 25h]

(In reply to Mayank Bansal from comment #22)

I can repro on a build from 2016, so this is not a recent regression

Thanks.

Comment 25

[Mayank Bansal]

Attachment: reduced_test.zip

This is a reduced testcase that repros on my Windows machine.
With my current knowledge of HTML, this is the least reduced I can make this (1 html, 2 css files)

Comment 26

[Mayank Bansal]

Attachment: Minimized testcase.htm

Minimized testcase.

Comment 27

[Mayank Bansal]

Attachment: about:support

Comment 28

[Frank Doty [:fdoty]]

The Performance Impact Calculator has determined this bug's performance impact to be low. If you'd like to request re-triage, you can reset the Performance Impact flag to "?" or needinfo the triage sheriff.

Platforms: Windows
Impact on site: Causes noticeable jank
[x] Affects animation smoothness

Comment 29

[Markus Stange [:mstange]]

We're probably creating a large surface as the drag feedback image. On macOS I can see the drag image sliding in from the top left at the start of the drag. So we probably want to do some size limiting in nsBaseDragService::DrawDrag or in PresShell::RenderSelection.