[Webkit-unassigned] [Bug 183870] New: [css-visibility][css-pointer-events] Removing scroll interactions on a 'scroll container' itself, not on it's descendants, breaks all scrolling, unlike desktop and other browsers

[bugzilla-daemon at webkit.org]

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

            Bug ID: 183870
           Summary: [css-visibility][css-pointer-events] Removing scroll
                    interactions on a 'scroll container' itself, not on
                    it's descendants, breaks all scrolling, unlike desktop
                    and other browsers
           Product: WebKit
           Version: Safari 11
          Hardware: iPhone / iPad
                OS: iOS 11
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: hi at jonjohnjohnson.com

To start out, I'm sure this is intentional because of the way scrolling is optimized for touch, but I'm wondering if you could offer some way to enable the same behavior that desktop safari and other browsers allow...

If you set 'pointer-events: none' or 'visibility: hidden' on an element that has a scrollport, then on set 'visibility: visible' or 'pointer-events: auto' on it's descendants, most browsers still allow the scrolling to work enabling experiences like this...

Try on safari desktop -> http://jsbin.com/cujesed/1

In the example, you can scroll the white blocks up from the bottom edge of the screen, filling out more of the screen where their scroll container sits, but when the white blocks are scrolled down to the bottom edge, you are still able to scroll the whole red webpage while your pointer is in the area that would scroll the white blocks if they were scrolled up.

Then try on iOS safari, notice you cannot scroll up on the white blocks. On 'touchstart' I am trying to reset the visibility/pointer-events on the scroll container, which is seen when the background changes to grey, but no scrolling is enabled.

In future versions of iOS Safari could we have a way to do this, leveraging 'native scrolling' instead of writing our own javascript based touch interactions to 'polyfill' the lack of scrolling?

Steps to produce...
1. Go to provided link on iOS Safari -> http://jsbin.com/cujesed/1
2. See how white boxes ('app-tray') sit at bottom of screen with styling of pointer-events:none (or visibility:hidden)
3. Descendants of 'app-tray' are styled with pointer-events:auto (or visibility:visible)
4. Notice how you cannot scroll the white boxes ('app-tray').
5. Go to link on desktop safari and see how you can scroll the white boxes into the screen.

-- 
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/20180321/74c965db/attachment.html>