1611949 - Scroll not working after transform and rotate an element with CSS - macOS Catalina

Status: NEW

(Core :: Panning and Zooming, defect, P3)

Description

[drojas]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36

Steps to reproduce:

*** Only using macOS Catalina ***

After applying multiple transforms, translate and rotate on different elements the scroll stops working. It is important to notice that the bug happens only at 90 degrees, 180 degrees and 270 degrees.

Reference example: https://codepen.io/lemmin/pen/xRyXMZ

Actual results:

The scroll stops working in some cases and in other cases, it works but extremely slow.

Expected results:

The scroll should move horizontally without issues.

Comment 1

[Hani Yacoub, Desktop QA]

Managed to reproduce the issue on Mac OS X 10.15 on FIrefox Nightly 74.0a1 (2020-02-02), Firefox 73.0b12 and on Firefox 72.0.2.

Comment 2

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

The priority flag is not set for this bug.
:nordzilla, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 3

[Erik Nordin [:nordzilla]]

I attempted to reproduce this as well. Here is what I noticed about your example (https://codepen.io/lemmin/pen/xRyXMZ):

Inside of about:config, when layers.async-pan-zoom.enabled = true it behaves the following way for me using a track pad:

• Initiate scrolling by swiping up/down, and leave your fingers on the track pad.
• You should now be able to swipe left/right to smoothly move the scroll bar horizontally.

Inside of about:config, when layers.async-pan-zoom.enabled = false it behaves the following way for me using a track pad:

• Swiping up/down will both initiate scrolling and move the scroll bar horizontally.

NOTE: toggling layers.async-pan-zoom.enabled requires a browser restart to take effect.

I am not sure which, if either, of these behaviors is correct, but I am going to re-classify this bug as Panning and Zooming.

:botond, could you take a look at this when you get a chance?

Comment 4

[Botond Ballo [:botond]]

I believe the desirable behaviour here is for the direction of the scrolling gesture to match physical directions on the screen.

So, on this page, since the element's scrollbar is physically horizontal, it should be a left/right swipe gesture that scrolls it, not an up/down swipe gesture.

This is largely the behaviour with APZ enabled (apart from the fact that you need an up/down gesture to initiate scrolling). The pre-APZ behaviour did not take into account transforms, which is why it's up/down gestures that cause scrolling in this case (since the element is vertically scrollable before transforms are applied).

Now, the fact that you need to start with an up/down gesture to initate scrolling, is a bug. It's related to macOS' "Swipe between pages" feature, which is why the bug is specific to macOS. Indeed, if you go to System Preferences --> Trackpad --> More Gestures and disable "Swipe between pages", scrolling now works with a regular left/right swipe, without needing to start with an up/down movement.

I suspect what's happening is that our code for determining whether an element is horizontally scrollable for the purpose of determining whether or not to enable the "swipe between pages" behaviour, does not take transforms into account, but it should.