Page shouldn't scroll while dragging (WR-specific)
Categories
(Core :: Panning and Zooming, defect, P3)
Tracking
()
People
(Reporter: agi, Assigned: kats)
References
(Blocks 3 open bugs)
Details
Attachments
(5 files)
Example: https://www.cnn.com/2020/04/15/world/viking-mountain-pass-norway-scn/index.html
drag the image slider left and right, on Chrome you can't scroll while dragging, on Firefox you can, and it makes dragging really hard.
|
Reporter | |
Comment 1•4 years ago
|
||
I'll cook up a minimal testcase soon.
|
||
Comment 2•4 years ago
|
||
Agi to move to APZ component once minimal test case found.
|
|
Reporter | |
Comment 3•4 years ago
•
|
||
I've tried for a couple of hours yesterday but could not figure out why that page can scroll while dragging on Firefox but not Chrome.
They seem to use an outdated library called owl carousel, version 2.1 and jQuery 1.11 but even with these libraries the carousel scrolls in both Chrome and Firefox in a test case that I built (later versions of the carousel correctly don't scroll while dragging on both browsers).
Botond, does this have to do with how we're doing handoff on Android? Could we add some axis lock magic to prevent vertical scrolling of the parent if you're scrolling a child horizontally?
|
|
Reporter | |
Comment 6•4 years ago
|
||
I can reproduce this on Instagram as well (scroll all the way down in your feed page, there's a slideshow that on Firefox can pan and scroll, while on Chrome doesn't scroll while panning) I can attach a video if it's helpful.
|
Assignee | |
Comment 7•4 years ago
|
||
Interestingly this works fine on Fennec. So I don't think it's a handoff problem, as that code hasn't changed since Fennec (at least as far as I remember).
|
|
Assignee | |
Comment 8•4 years ago
|
||
Also works fine on a windows laptop using touchscreen.
|
|
Assignee | |
Comment 9•4 years ago
|
||
Hm, seems to be specific to WebRender. If you force-disable WebRender this works fine in Fenix. On my old Z3C which has WR disabled by default it also works fine.
|
|
Assignee | |
Comment 10•4 years ago
|
||
Just guessing, but probably the carousel is setting touch-action properties that we're not properly respecting with WR.
|
||
Comment 11•4 years ago
|
||
(In reply to Kartikaya Gupta (email:kats@mozilla.com) from comment #8)
Also works fine on a windows laptop using touchscreen.
Windows webrender touchscreen has the same issue for me, so it might be easier to debug there.
(custom settings: apz.allow_zooming: true, apz.windows.use_direct_manipulation: true)
|
|
Reporter | |
Comment 12•4 years ago
|
||
I think this is higher priority, it makes high profile websites like Instagram really hard to use (I see this all the time I can bring more examples if needed).
|
|
Assignee | |
Comment 13•4 years ago
|
||
Ok, I can try to take a look this week.
|
|
Reporter | |
Comment 14•4 years ago
|
||
Thank you kats!
|
|
Assignee | |
Comment 15•4 years ago
|
||
I started investigating using the CNN test page, since I have concrete STR for that. There is indeed a touch-action: pan-y on one of the enclosing divs of the carousel (the one with class="js-owl-carousel owl-carousel carousel--full body owl-loaded owl-drag"). With non-WR the way this works is APZ knows it can do y-direction panning, so if the user does a horizontal pan it goes back from state TOUCHING to state NOTHING here and that prevents the touch block from triggering vertical panning later if the user changes direction.
Now I need to look at the WR path to see what's going on there.
|
|
Assignee | |
Comment 16•4 years ago
|
||
With the WR path, APZ gets a hit info of 0xc1 which means pan-x AND pan-y. This causes APZ to obviously allow panning in both directions. The reason we get pan-x and pan-y is because we hit the codepath here because there's a div inside the pan-y one that is overflow:hidden and treat it like a scrollframe.
The non-WR equivalent codepath uses GetNearestScrollableFrame to determine what's a "scrollframe" and what's not, and that function ignores scrollframes where the overflow styles are both hidden, here (unless the appropriate flag is provided, which it isn't in this case).
So we need to fix the WR codepath to also ignore overflow:hidden scrollframes for touch-action purposes, and hopefully that will resolve this issue.
|
|
Assignee | |
Comment 17•4 years ago
|
||
That does seem to fix the problem. Working on a test, should have patches up soonish.
|
|
Assignee | |
Comment 18•4 years ago
|
||
|
|
Assignee | |
Comment 19•4 years ago
|
||
Depends on D75143
|
|
Assignee | |
Comment 20•4 years ago
|
||
Depends on D75144
|
|
Assignee | |
Comment 21•4 years ago
|
||
|
|
Reporter | |
Comment 22•4 years ago
|
||
I downloaded GVE from the try build and I can still reproduce on instagram (maybe a different bug?)
|
|
Reporter | |
Comment 23•4 years ago
|
||
|
|
Reporter | |
Comment 24•4 years ago
|
||
Comment on attachment 9148199 [details]
doesn't repro on Blink
This is on Blink 61 (sorry that was the only version available on the emulator, it's the same on my up-to-date Chrome on my phone)
|
||
Comment 25•4 years ago
|
||
Pushed by kgupta@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/67e9a99139c1 Print hit info as hex, not decimal. r=tnikkel https://hg.mozilla.org/integration/autoland/rev/3184b5dc57b9 Don't treat overflow:hidden divs as scrollframes for touch-action purposes with WR enabled. r=tnikkel https://hg.mozilla.org/integration/autoland/rev/a86d55f19f9d Add a test. r=tnikkel
|
|
Assignee | |
Comment 26•4 years ago
|
||
If you still see it on Instagram please file another bug with STR. Thanks!
|
||
Comment 27•4 years ago
|
||
| bugherder | ||
https://hg.mozilla.org/mozilla-central/rev/67e9a99139c1
https://hg.mozilla.org/mozilla-central/rev/3184b5dc57b9
https://hg.mozilla.org/mozilla-central/rev/a86d55f19f9d
|
||
Comment 28•4 years ago
|
||
I have tested the issue on Firefox Preview Nightly 200610 using a OnePlus 6T (Android 9) and Huawei MediaPad M3 (Android 7.0) and I am unable to reproduce the issue. When scrolling through a vertical pictures carousel at https://www.cnn.com/2020/04/15/world/viking-mountain-pass-norway-scn/index.html horizontal gestures are ignored.
|
|
||
Updated•4 years ago
|
Description
•