[Webkit-unassigned] [Bug 183870] [css-visibility][css-pointer-events] Removing pointer interactions on a 'scroll container' itself (or parent), but re-enabling them on descendants, doesn't work on ios safari, unlike macOS and other browsers

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=183870

jonjohnjohnson <hi at jonjohnjohnson.com> changed:

           What    |Removed                     |Added
----------------------------------------------------------------------------
           Severity|Normal                      |Critical

--- Comment #2 from jonjohnjohnson <hi at jonjohnjohnson.com> ---
Here's an even more reduced test case showing the bug AND a work around, which makes me think my initial belief of this being intentional in iOS was incorrect:

- https://jsbin.com/talomas/quiet
- https://jsbin.com/talomas/edit?html,css,output


Steps to see the differences in the scrollers:
1. Open test case in iOS https://jsbin.com/talomas/quiet
2. Swipe vertically in the pink areas of both the left and right side of the screen, notice it just scrolls the document/body.
3. Swipe vertically on the right side from the striped area, notice it allows for scrolling of the pink background scroller.
4. Attempt the same vertically scrolling in the left side from the striped area. Nothing will get the pink scroller to scroll. It only passes the scrolling events down to the document/body scroller.

Results:
The left side scroller *should accept vertical scrolling interactions on iOS (and always on macOS, even if sometimes it's bugged between being viewed in an iframe or not?) above its striped background children elements.

Expected Results:
Both left and right side scrollers should allows for vertical scrolling from scrolling interactions (touch/mouse) above their striped background children elements.

There are two vertical scrollers at the top of the screen, with pointer-events removed on themselves, but again, with a child element that re-enables pointer-events. The top half of the scrollers scrollport in both, allows pointer-events to pass through, so scrolling there will just scroll the body element of the document. But if you scroll from above the child elements, with striped backgrounds, you *should be able to scroll both scrollers.

The left side scroller, shows the bug where on iOS (and even sometimes on macOS) you cannot scroll.

The right side scroller has horizontally overflowing and scrollable content, just by adding `overflow-x: scroll` to its 'tray-inner' element, and this in itself seems to be the work around to get iOS safari to recognize vertical scrolling on itself for its parent scroller. You shouldn't need to make an element scrollable in an opposite axis in order for it to actually accept scrolling of its parent scroller, especially since this more or less creates just another problem in a user accidentally scrolling that other axis.

I hope this helps describe the problem more clearly. And if not, I can try to record a video of the differences from macOS and iOS.

cc simon.fraser at apple.com

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20181118/9eec7c80/attachment.html>