Cherry-pick 28c7acb. rdar://problem/99848107

REGRESSION (254304@main): Sidebar on MDN articles is often misplaced https://bugs.webkit.org/show_bug.cgi?id=245192 <rdar://99848107> Reviewed by Alan Bujtas and Tim Nguyen. For "viewport constrained" scrolling elements, we need to pass the viewportAnchorLayer() to the scrolling tree. This happened in the main code path, but this path that runs when toggling to/from tiled layers, or with backdrops, also needs updating. * LayoutTests/compositing/tiling/sticky-change-to-tiled-expected.html: Added. * LayoutTests/compositing/tiling/sticky-change-to-tiled.html: Added. * LayoutTests/compositing/tiling/sticky-with-backdrop-expected.html: Added. * LayoutTests/compositing/tiling/sticky-with-backdrop.html: Added. * Source/WebCore/rendering/RenderLayerCompositor.cpp: (WebCore::RenderLayerCompositor::didChangePlatformLayerForLayer): Canonical link: https://commits.webkit.org/254496@main Canonical link: https://commits.webkit.org/254351.4@safari-7615.1.6-branch
WebKit · Sep 14, 2022 · db78f36 · db78f36
1 parent 9585e39
commit db78f36
Show file tree

Hide file tree

Showing 5 changed files with 166 additions and 1 deletion.
diff --git a/LayoutTests/compositing/tiling/sticky-change-to-tiled-expected.html b/LayoutTests/compositing/tiling/sticky-change-to-tiled-expected.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        body {
+            margin: 0;
+        }
+        .sticky {
+            position: sticky;
+            top: 0px;
+            left: 100px;
+            width: 300px;
+            height: 300px;
+            border: 1px solid black;
+            height: 2000px;
+        }
+
+        .green {
+            width: 100px;
+            height: 100px;
+            background-color: green;
+        }
+
+        .red {
+            position: absolute;
+            top: 0px;
+            left: 100px;
+            width: 100px;
+            height: 100px;
+            background-color: red;
+        }
+
+        ::-webkit-scrollbar {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="red"></div>
+    <div class="sticky">
+        <div class="green"></div>
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/compositing/tiling/sticky-change-to-tiled.html b/LayoutTests/compositing/tiling/sticky-change-to-tiled.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        body {
+            margin: 0;
+        }
+        .sticky {
+            position: sticky;
+            top: 0px;
+            left: 100px;
+            width: 300px;
+            height: 300px;
+            border: 1px solid black;
+        }
+        body.changed .sticky {
+            height: 5000px;
+        }
+
+        .green {
+            width: 100px;
+            height: 100px;
+            background-color: green;
+        }
+
+        .red {
+            position: absolute;
+            top: 0px;
+            left: 100px;
+            width: 100px;
+            height: 100px;
+            background-color: red;
+        }
+
+        ::-webkit-scrollbar {
+            display: none;
+        }
+    </style>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+
+        window.addEventListener('load', () => {
+            requestAnimationFrame(() => {
+                document.body.classList.add('changed');
+                if (window.testRunner)
+                    testRunner.notifyDone();
+            })
+        }, false);
+    </script>
+</head>
+<body>
+    <div class="red"></div>
+    <div class="sticky">
+        <div class="green"></div>
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/compositing/tiling/sticky-with-backdrop-expected.html b/LayoutTests/compositing/tiling/sticky-with-backdrop-expected.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        body {
+            margin: 0;
+        }
+        .sticky {
+            position: sticky;
+            top: 0px;
+            left: 100px;
+            width: 300px;
+            height: 300px;
+            background-color: green;
+        }
+
+        .red {
+            position: absolute;
+            top: 0px;
+            left: 100px;
+            width: 300px;
+            height: 300px;
+            background-color: red;
+        }
+    </style>
+</head>
+<body>
+    <div class="red"></div>
+    <div class="sticky"></div>
+</body>
+</html>
diff --git a/LayoutTests/compositing/tiling/sticky-with-backdrop.html b/LayoutTests/compositing/tiling/sticky-with-backdrop.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        body {
+            margin: 0;
+        }
+        .sticky {
+            position: sticky;
+            top: 0px;
+            left: 100px;
+            width: 300px;
+            height: 300px;
+            background-color: green;
+            -webkit-backdrop-filter: contrast(1);
+        }
+
+        .red {
+            position: absolute;
+            top: 0px;
+            left: 100px;
+            width: 300px;
+            height: 300px;
+            background-color: red;
+        }
+    </style>
+</head>
+<body>
+    <div class="red"></div>
+    <div class="sticky"></div>
+</body>
+</html>
diff --git a/Source/WebCore/rendering/RenderLayerCompositor.cpp b/Source/WebCore/rendering/RenderLayerCompositor.cpp
@@ -678,7 +678,7 @@ void RenderLayerCompositor::didChangePlatformLayerForLayer(RenderLayer& layer, c
         clippingStack->updateScrollingNodeLayers(*scrollingCoordinator);
 
     if (auto nodeID = backing->scrollingNodeIDForRole(ScrollCoordinationRole::ViewportConstrained))
-        scrollingCoordinator->setNodeLayers(nodeID, { backing->graphicsLayer() });
+        scrollingCoordinator->setNodeLayers(nodeID, { backing->viewportAnchorLayer() });
 
     if (auto nodeID = backing->scrollingNodeIDForRole(ScrollCoordinationRole::FrameHosting))
         scrollingCoordinator->setNodeLayers(nodeID, { backing->graphicsLayer() });