[Webkit-unassigned] [Bug 202531] New: "touch-action: pan-y" doesn't work

[bugzilla-daemon at webkit.org]

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

            Bug ID: 202531
           Summary: "touch-action: pan-y" doesn't work
           Product: WebKit
           Version: Other
          Hardware: iPhone / iPad
                OS: iOS 13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: UI Events
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: tobi at tobireif.com

When I load https://tobireif.com/posts/layout_fun_with_css_grid/ eg on a Galaxy phone (eg in Chrome), and drag the "resize"-bar (below "Another demo"), and over-drag, the handle stops moving. So I add touch-action: pan-y – now when I over-drag, the handle follows. And when I drag the grid demo itself, I get normal y-axis scrolling of the page.

When I load this in the iPhone simulator app (iOS 13 iPhone 8), and over-drag the resize-bar, it (sometimes) doesn't follow. For example: drag-resize the in-page demo to narrow, over-drag, then go back all the way. Do this once or eg twice -> the drag-handle stops following.

So I added this hack:

(function() {

  isMobileSafari = /iP(ad|hone|od)/i.test(navigator.userAgent);
  if (isMobileSafari) {
    demo.style.touchAction = "none";
  }

})();

Now there's no issue with the drag-handle (it always follows), but I don't get any scrolling (the page doesn't move when I try to drag the demo itself up/down). But page-scrolling is very important :/

I hope that you can reproduce all this (probably by toggling stuff via the dev-tools), and that the issue(s) can get fixed soon. Then I can remove the iPhone hack. In Chrome (eg on a Galaxy phone) everything works beautifully.

-- 
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/20191003/2f9a1b39/attachment.html>