Can't scroll on yummly.co.uk recipe (scale(0) div covers the content and hit-tests)
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 30 Jul 2019 20:21:25 +0000 (20:21 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 30 Jul 2019 20:21:25 +0000 (20:21 +0000)
https://bugs.webkit.org/show_bug.cgi?id=200263
rdar://problem/53679408

Reviewed by Antti Koivisto.

Source/WebKit:

The content on this page had a scale(0) div overlaying an overflow:scroll element,
and our UI-side hit-testing code would find this scale(0) element, because apparently
-[UIView convertPoint:fromView:] will happily work with non-invertible matrices, and
-[UIView pointInside:withEvent:] just compares the point with the view bounds.

Since the view frame takes the transform into account, we can look for an empty frame
to detect these non-invertible transforms.

* UIProcess/RemoteLayerTree/ios/RemoteLayerTreeViews.mm:
(WebKit::collectDescendantViewsAtPoint):

LayoutTests:

* fast/scrolling/ios/non-invertible-transformed-over-scroller-expected.txt: Added.
* fast/scrolling/ios/non-invertible-transformed-over-scroller.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@248015 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/scrolling/ios/non-invertible-transformed-over-scroller-expected.txt [new file with mode: 0644]
LayoutTests/fast/scrolling/ios/non-invertible-transformed-over-scroller.html [new file with mode: 0644]
Source/WebKit/ChangeLog
Source/WebKit/UIProcess/RemoteLayerTree/ios/RemoteLayerTreeViews.mm

index 957d342..463a9c0 100644 (file)
 
 2019-07-29  Simon Fraser  <simon.fraser@apple.com>
 
+        Can't scroll on yummly.co.uk recipe (scale(0) div covers the content and hit-tests)
+        https://bugs.webkit.org/show_bug.cgi?id=200263
+        rdar://problem/53679408
+
+        Reviewed by Antti Koivisto.
+
+        * fast/scrolling/ios/non-invertible-transformed-over-scroller-expected.txt: Added.
+        * fast/scrolling/ios/non-invertible-transformed-over-scroller.html: Added.
+
+2019-07-29  Simon Fraser  <simon.fraser@apple.com>
+
         The touch-action property was ignored on replaced elements (canvas, img etc)
         https://bugs.webkit.org/show_bug.cgi?id=200205
         rdar://problem/53331224
diff --git a/LayoutTests/fast/scrolling/ios/non-invertible-transformed-over-scroller-expected.txt b/LayoutTests/fast/scrolling/ios/non-invertible-transformed-over-scroller-expected.txt
new file mode 100644 (file)
index 0000000..82fba71
--- /dev/null
@@ -0,0 +1,12 @@
+Tests hit-testing of layers over scrollers with odd transforms
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS scrollTopWithScale0Overlay is 100
+PASS scrollTopWithScaledOverlayHitOverlay is 0
+PASS scrollTopWithScaledOverlayHitScroller is 100
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/scrolling/ios/non-invertible-transformed-over-scroller.html b/LayoutTests/fast/scrolling/ios/non-invertible-transformed-over-scroller.html
new file mode 100644 (file)
index 0000000..9bd4484
--- /dev/null
@@ -0,0 +1,99 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ internal:AsyncOverflowScrollingEnabled=true ] -->
+<html>
+<head>
+    <meta name="viewport" content="width=device-width">
+    <style>
+        div {
+            box-sizing: border-box;
+        }
+        .container {
+            position: relative;
+            width: 200px;
+            height: 200px;
+            margin: 10px;
+            border: 1px solid black;
+        }
+        
+        .scroller {
+            overflow: scroll;
+        }
+        
+        .content {
+            width: 100%;
+            height: 300%;
+            background-image: repeating-linear-gradient(white, silver 200px);
+        }
+        
+        .overlay {
+            transform-origin: top left;
+            background-color: rgba(0, 0, 0, 0.25);
+        }
+        
+        .container > div {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+    <script src="../../../resources/ui-helper.js"></script>
+    <script src="../../../resources/js-test-pre.js"></script>
+    <script>
+        var scrollTopWithScale0Overlay;
+        var scrollTopWithScaledOverlayHitOverlay;
+        var scrollTopWithScaledOverlayHitScroller;
+
+        window.addEventListener('load', async () => {
+
+            let scrollers = document.querySelectorAll('.scroller');
+            let bounds = scrollers[0].getBoundingClientRect();
+
+            await UIHelper.immediateScrollElementAtContentPointToOffset(bounds.left + 10, bounds.top + 10, 0, 100);
+            scrollTopWithScale0Overlay = scrollers[0].scrollTop;
+            
+            // In case the previous scroll failed.
+            document.scrollingElement.scrollTop = 0;
+            scrollers[1].scrollTop = 0;
+
+            bounds = scrollers[1].getBoundingClientRect();
+            // Hit the overlay
+            await UIHelper.immediateScrollElementAtContentPointToOffset(bounds.left + 10, bounds.top + 10, 0, 100);
+            scrollTopWithScaledOverlayHitOverlay = scrollers[1].scrollTop;
+
+            // In case the previous scroll failed.
+            document.scrollingElement.scrollTop = 0;
+            scrollers[1].scrollTop = 0;
+
+            // Hit the scroller
+            await UIHelper.immediateScrollElementAtContentPointToOffset(bounds.left + bounds.width / 2 + 10, bounds.top + 10, 0, 100);
+            scrollTopWithScaledOverlayHitScroller = scrollers[1].scrollTop;
+            
+            description('Tests hit-testing of layers over scrollers with odd transforms');
+            shouldBe('scrollTopWithScale0Overlay', '100');
+            shouldBe('scrollTopWithScaledOverlayHitOverlay', '0');
+            shouldBe('scrollTopWithScaledOverlayHitScroller', '100');
+
+            finishJSTest();
+            
+        }, false);
+
+        var successfullyParsed = true;
+        var jsTestIsAsync = true;
+    </script>
+    <script src="../../../resources/js-test-post.js"></script>
+</head>
+<body>
+    <div class="container">
+        <div class="scroller">
+            <div class="content"></div>
+        </div>
+        <div class="overlay" style="transform: scale(0)"></div>
+    </div>
+
+    <div class="container">
+        <div class="scroller">
+            <div class="content"></div>
+        </div>
+        <div class="overlay" style="transform: scale(0.5)"></div>
+    </div>
+</body>
+</html>
index b49a443..f427681 100644 (file)
         context to ensure that the completion handler for the nested request is invoked before the outer request is
         finished.
 
+2019-07-29  Simon Fraser  <simon.fraser@apple.com>
+
+        Can't scroll on yummly.co.uk recipe (scale(0) div covers the content and hit-tests)
+        https://bugs.webkit.org/show_bug.cgi?id=200263
+        rdar://problem/53679408
+
+        Reviewed by Antti Koivisto.
+
+        The content on this page had a scale(0) div overlaying an overflow:scroll element,
+        and our UI-side hit-testing code would find this scale(0) element, because apparently
+        -[UIView convertPoint:fromView:] will happily work with non-invertible matrices, and 
+        -[UIView pointInside:withEvent:] just compares the point with the view bounds.
+
+        Since the view frame takes the transform into account, we can look for an empty frame
+        to detect these non-invertible transforms.
+
+        * UIProcess/RemoteLayerTree/ios/RemoteLayerTreeViews.mm:
+        (WebKit::collectDescendantViewsAtPoint):
+
 2019-07-29  Youenn Fablet  <youenn@apple.com>
 
         NetworkProcess clear and fetch of cache entries might move the callback aggregator more than once
index f126629..9800670 100644 (file)
@@ -52,8 +52,13 @@ static void collectDescendantViewsAtPoint(Vector<UIView *, 16>& viewsAtPoint, UI
             //        It is currently only needed for scroll views.
             if (!view.isUserInteractionEnabled)
                 return false;
+
+            if (CGRectIsEmpty([view frame]))
+                return false;
+
             if (![view pointInside:subviewPoint withEvent:event])
                 return false;
+
             if (![view isKindOfClass:[WKCompositingView class]])
                 return true;
             auto* node = RemoteLayerTreeNode::forCALayer(view.layer);