Bug 202531 - "touch-action: pan-y" doesn't work
Summary: "touch-action: pan-y" doesn't work
Status: RESOLVED DUPLICATE of bug 202053
Alias: None
Product: WebKit
Classification: Unclassified
Component: UI Events (show other bugs)
Version: Other
Hardware: iPhone / iPad iOS 13
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-10-03 09:33 PDT by Tobi Reif
Modified: 2019-11-08 02:43 PST (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Tobi Reif 2019-10-03 09:33:19 PDT
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.
Comment 1 Radar WebKit Bug Importer 2019-10-03 09:34:54 PDT
<rdar://problem/55949668>
Comment 2 Antoine Quint 2019-10-04 05:36:42 PDT
I think this is a duplicate of bug 202053. You should be able to try it out in the iOS 13.2 beta. I tried your test and as I understand it, disabling the `touch-action: none` style has the expected behavior: I can resize by dragging horizontally, but I can also scroll vertically if the initial gesture is vertical.

*** This bug has been marked as a duplicate of bug 202053 ***
Comment 3 Tobi Reif 2019-11-04 02:11:50 PST
I tried to download iOS 13.2 beta, but
https://developer.apple.com/download/ ->
https://download.developer.apple.com/Developer_Tools/Xcode_11.2_beta_2/Xcode_11.2_beta_2.xip
currently brings "403 Forbidden". I'm logged in (and I'm using Safari).
Comment 4 Antoine Quint 2019-11-04 05:18:16 PST
iOS 13.2 has been released publicly already, you shouldn't need a beta build and should be able to use a GM build.
Comment 5 Tobi Reif 2019-11-07 23:27:44 PST
It has been released since then (when I had checked, XCode 11.2 was listed as beta). Downloading it right now.
https://download.developer.apple.com/Developer_Tools/Xcode_11.2.1_GM_Seed/Xcode_11.2.1_GM_Seed.xip
Comment 6 Tobi Reif 2019-11-08 02:43:58 PST
I checked it in iOS 13.2 (Simulator.app -> iPhone 8).

(By the way, since the update it's not possible to copy'n'paste from outside the simulator into the URL bar. Is this a known bug?)

I can confirm that the reported issue has been fixed:

I can over-drag the resize-handle of the in-page demo and move back, and the handle always follows.

And when I drag the demo itself along the y-axis, the page scrolls.

Thanks a lot!