Fix the position of layers nested inside of composited overflow-scroll
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 22 Jan 2019 19:55:00 +0000 (19:55 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 22 Jan 2019 19:55:00 +0000 (19:55 +0000)
https://bugs.webkit.org/show_bug.cgi?id=193642

Reviewed by Antti Koivisto and Sam Weinig.
Source/WebCore:

Remove an iOS #ifdef so that layers inside composited overflow gets the correct
positions on macOS too.

Test: compositing/geometry/fixed-inside-overflow-scroll.html

* rendering/RenderLayerBacking.cpp:
(WebCore::RenderLayerBacking::computeParentGraphicsLayerRect const):

LayoutTests:

Ref test. Black bar obscures the area that's different because of overlay/non-overlay
scrollbar differences between macOS and iOS.

* compositing/geometry/fixed-inside-overflow-scroll-expected.html: Added.
* compositing/geometry/fixed-inside-overflow-scroll.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/compositing/geometry/fixed-inside-overflow-scroll-expected.html [new file with mode: 0644]
LayoutTests/compositing/geometry/fixed-inside-overflow-scroll.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderLayerBacking.cpp

index 85d4006..a5435df 100644 (file)
@@ -1,3 +1,16 @@
+2019-01-22  Simon Fraser  <simon.fraser@apple.com>
+
+        Fix the position of layers nested inside of composited overflow-scroll
+        https://bugs.webkit.org/show_bug.cgi?id=193642
+
+        Reviewed by Antti Koivisto and Sam Weinig.
+        
+        Ref test. Black bar obscures the area that's different because of overlay/non-overlay
+        scrollbar differences between macOS and iOS.
+
+        * compositing/geometry/fixed-inside-overflow-scroll-expected.html: Added.
+        * compositing/geometry/fixed-inside-overflow-scroll.html: Added.
+
 2019-01-22  Oriol Brufau  <obrufau@igalia.com>
 
         [css-logical] Implement flow-relative margin, padding and border shorthands
diff --git a/LayoutTests/compositing/geometry/fixed-inside-overflow-scroll-expected.html b/LayoutTests/compositing/geometry/fixed-inside-overflow-scroll-expected.html
new file mode 100644 (file)
index 0000000..c9e160c
--- /dev/null
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <style>
+        body {
+            margin: 0;
+        }
+        .container {
+            position: relative;
+            z-index: 0;
+            margin: 50px;
+            width: 400px;
+            height: 320px;
+            overflow-y: scroll;
+            border: 30px solid gray;
+            box-shadow: 0 0 10px transparent;
+            padding: 20px;
+        }
+
+        .inner {
+            position: relative;
+            height: 1000px;
+            width: 100%;
+            background-color: silver;
+        }
+        
+        .inner-fixed {
+            position: absolute;
+            top: 50px;
+            left: 100px;
+            width: 200px;
+            height: 150px;
+            background-color: green;
+            box-shadow: 0 0 10px transparent;
+            will-change: transform;
+        }
+        
+        .placeholder {
+            position: absolute;
+            background-color: red;
+            top: 50px;
+            left: 100px;
+            width: 200px;
+            height: 148px;
+        }
+
+        .scrollbar-hider {
+            position: absolute;
+            height: 380px;
+            width: 37px;
+            top: 70px;
+            left: 484px;
+            background-color: black;
+        }
+    </style>
+</head>
+<body>
+
+<div id="scroller" class="container">
+    <div class="inner">
+        &nbsp;
+        <div class="placeholder"></div>
+        <div class="inner-fixed"></div>
+    </div>
+</div>
+<div class="scrollbar-hider"></div>
+
+</body>
+</html>
diff --git a/LayoutTests/compositing/geometry/fixed-inside-overflow-scroll.html b/LayoutTests/compositing/geometry/fixed-inside-overflow-scroll.html
new file mode 100644 (file)
index 0000000..c8d3696
--- /dev/null
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <style>
+        body {
+            margin: 0;
+        }
+        .container {
+            position: relative;
+            z-index: 0;
+            margin: 50px;
+            width: 400px;
+            height: 320px;
+            overflow-y: scroll;
+            border: 30px solid gray;
+            box-shadow: 0 0 10px transparent;
+            padding: 20px;
+        }
+
+        .inner {
+            height: 1000px;
+            width: 100%;
+            background-color: silver;
+        }
+        
+        .inner-fixed {
+            position: fixed;
+            top: 150px;
+            left: 200px;
+            width: 200px;
+            height: 150px;
+            background-color: green;
+            box-shadow: 0 0 10px transparent;
+        }
+        
+        .placeholder {
+            background-color: red;
+            width: 200px;
+            height: 148px;
+            margin: 32px 100px;
+        }
+        
+        .scrollbar-hider {
+            position: absolute;
+            height: 380px;
+            width: 37px;
+            top: 70px;
+            left: 484px;
+            background-color: black;
+        }
+    </style>
+    <script>
+        if (window.internals)
+            window.internals.settings.setAsyncOverflowScrollingEnabled(true);
+    </script>
+</head>
+<body>
+
+<div id="scroller" class="container">
+    <div class="inner">
+        &nbsp;
+        <div class="placeholder"></div>
+        <div class="inner-fixed"></div>
+    </div>
+</div>
+<div class="scrollbar-hider"></div>
+
+</body>
+</html>
index c2e528d..3976243 100644 (file)
@@ -1,3 +1,18 @@
+2019-01-22  Simon Fraser  <simon.fraser@apple.com>
+
+        Fix the position of layers nested inside of composited overflow-scroll
+        https://bugs.webkit.org/show_bug.cgi?id=193642
+
+        Reviewed by Antti Koivisto and Sam Weinig.
+
+        Remove an iOS #ifdef so that layers inside composited overflow gets the correct
+        positions on macOS too.
+
+        Test: compositing/geometry/fixed-inside-overflow-scroll.html
+
+        * rendering/RenderLayerBacking.cpp:
+        (WebCore::RenderLayerBacking::computeParentGraphicsLayerRect const):
+
 2019-01-22  Claudio Saavedra  <csaavedra@igalia.com>
 
         [GTK] Build fix for Ubuntu LTS 16.04
index 31c326f..9cf8c68 100644 (file)
@@ -946,7 +946,6 @@ LayoutRect RenderLayerBacking::computeParentGraphicsLayerRect(RenderLayer* compo
         parentGraphicsLayerRect = snappedGraphicsLayer(clippingBoxOffset, clippingBox.size(), deviceScaleFactor()).m_snappedRect;
     }
 
-#if PLATFORM(IOS_FAMILY)
     if (compositedAncestor->hasCompositedScrollableOverflow()) {
         LayoutRect ancestorCompositedBounds = ancestorBackingLayer->compositedBounds();
         auto& renderBox = downcast<RenderBox>(compositedAncestor->renderer());
@@ -954,7 +953,6 @@ LayoutRect RenderLayerBacking::computeParentGraphicsLayerRect(RenderLayer* compo
         ScrollOffset scrollOffset = compositedAncestor->scrollOffset();
         parentGraphicsLayerRect = LayoutRect((paddingBoxIncludingScrollbar.location() - toLayoutSize(ancestorCompositedBounds.location()) - toLayoutSize(scrollOffset)), paddingBoxIncludingScrollbar.size());
     }
-#endif
 
     if (m_ancestorClippingLayer) {
         // Call calculateRects to get the backgroundRect which is what is used to clip the contents of this