- Revision
- 243211
- Author
- [email protected]
- Date
- 2019-03-20 09:44:49 -0700 (Wed, 20 Mar 2019)
Log Message
Some elements lag behind async overflow scrolling on palace-games.com
https://bugs.webkit.org/show_bug.cgi?id=195934
Reviewed by Zalan Bujtas.
Source/WebCore:
The logic added in r242997 was wrong for an absolutely-positioned layer whose containig block was
inside an overflow:scroll, but whose compositing ancestor was outside. This is a case where
we need to make a Positioning node for the absolute layer, because it needs to move along
with the scrolled content.
There are six permutations of overflow, containing block and compositing ancestor that we care about.
Showing renderer (aka DOM) order, they are (where <- indicates child <- parent):
layer <- cb <- ca <- os -- no positioned node required
layer <- cb <- os <- ca -- compositing parent skips overflow, need a "Moved" Positioned node.
layer <- ov <- cb <- ca -- no positioned node required
layer <- ov <- ca <- cb -- no positioned node required
layer <- ca <- cb <- ov -- no positioned node required
layer <- ca <- ov <- cb -- containing block skips overflow, need a "Stationary" Positioned node.
[cb = containing block, ca = compositing ancestor, ov = overflow scroll]
Test: scrollingcoordinator/scrolling-tree/positioned-nodes-complex.html
* rendering/RenderLayer.cpp:
(WebCore::outputPaintOrderTreeRecursive):
* rendering/RenderLayerCompositor.cpp:
(WebCore::layerParentedAcrossCoordinatedScrollingBoundary):
(WebCore::RenderLayerCompositor::computeCoordinatedPositioningForLayer const):
LayoutTests:
Add a test with more combinations of overflow, containing block and compositing ancestor.
* platform/ios-wk2/scrollingcoordinator/scrolling-tree/positioned-nodes-complex-expected.txt: Added.
* scrollingcoordinator/scrolling-tree/positioned-nodes-complex-expected.txt: Added.
* scrollingcoordinator/scrolling-tree/positioned-nodes-complex.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (243210 => 243211)
--- trunk/LayoutTests/ChangeLog 2019-03-20 16:41:15 UTC (rev 243210)
+++ trunk/LayoutTests/ChangeLog 2019-03-20 16:44:49 UTC (rev 243211)
@@ -1,5 +1,18 @@
2019-03-20 Simon Fraser <[email protected]>
+ Some elements lag behind async overflow scrolling on palace-games.com
+ https://bugs.webkit.org/show_bug.cgi?id=195934
+
+ Reviewed by Zalan Bujtas.
+
+ Add a test with more combinations of overflow, containing block and compositing ancestor.
+
+ * platform/ios-wk2/scrollingcoordinator/scrolling-tree/positioned-nodes-complex-expected.txt: Added.
+ * scrollingcoordinator/scrolling-tree/positioned-nodes-complex-expected.txt: Added.
+ * scrollingcoordinator/scrolling-tree/positioned-nodes-complex.html: Added.
+
+2019-03-20 Simon Fraser <[email protected]>
+
Explicitly trigger compositing for layers that need to be moved by ScrollingTreePositionedNodes
https://bugs.webkit.org/show_bug.cgi?id=195710
Added: trunk/LayoutTests/platform/ios-wk2/scrollingcoordinator/scrolling-tree/positioned-nodes-complex-expected.txt (0 => 243211)
--- trunk/LayoutTests/platform/ios-wk2/scrollingcoordinator/scrolling-tree/positioned-nodes-complex-expected.txt (rev 0)
+++ trunk/LayoutTests/platform/ios-wk2/scrollingcoordinator/scrolling-tree/positioned-nodes-complex-expected.txt 2019-03-20 16:44:49 UTC (rev 243211)
@@ -0,0 +1,143 @@
+Scrolling content
+Stacking
+Scrolling content
+Containing
+Scrolling content
+Containing
+Stacking
+Scrolling content
+Scrolling content
+Stacking
+Containing
+Scrolling content
+Containing
+Stacking
+
+(Frame scrolling node
+ (scrollable area size 800 600)
+ (contents size 800 829)
+ (parent relative scrollable rect at (0,0) size 800x600)
+ (scrollable area parameters
+ (horizontal scroll elasticity 1)
+ (vertical scroll elasticity 1)
+ (horizontal scrollbar mode 0)
+ (vertical scrollbar mode 0))
+ (layout viewport at (0,0) size 800x600)
+ (min layout viewport origin (0,0))
+ (max layout viewport origin (0,229))
+ (behavior for fixed 0)
+ (children 12
+ (Overflow scrolling node
+ (scrollable area size 220 170)
+ (contents size 220 1020)
+ (parent relative scrollable rect at (302,579) size 220x170)
+ (scrollable area parameters
+ (horizontal scroll elasticity 1)
+ (vertical scroll elasticity 1)
+ (horizontal scrollbar mode 0)
+ (vertical scrollbar mode 0)
+ (has enabled vertical scrollbar 1))
+ )
+ (Positioned node
+ (layout constraints
+ (layer-position-at-last-layout (10,30))
+ (positioning-behavior moves))
+ (related overflow nodes 1)
+ )
+ (Positioned node
+ (layout constraints
+ (layer-position-at-last-layout (10,50))
+ (positioning-behavior moves))
+ (related overflow nodes 1)
+ )
+ (Overflow scrolling node
+ (scrollable area size 220 170)
+ (contents size 220 1020)
+ (parent relative scrollable rect at (30,579) size 220x170)
+ (scrollable area parameters
+ (horizontal scroll elasticity 1)
+ (vertical scroll elasticity 1)
+ (horizontal scrollbar mode 0)
+ (vertical scrollbar mode 0)
+ (has enabled vertical scrollbar 1))
+ )
+ (Positioned node
+ (layout constraints
+ (layer-position-at-last-layout (10,30))
+ (positioning-behavior moves))
+ (related overflow nodes 1)
+ )
+ (Overflow scrolling node
+ (scrollable area size 220 170)
+ (contents size 220 1020)
+ (parent relative scrollable rect at (302,347) size 220x170)
+ (scrollable area parameters
+ (horizontal scroll elasticity 1)
+ (vertical scroll elasticity 1)
+ (horizontal scrollbar mode 0)
+ (vertical scrollbar mode 0)
+ (has enabled vertical scrollbar 1))
+ )
+ (Overflow scrolling node
+ (scrollable area size 220 170)
+ (contents size 220 1020)
+ (parent relative scrollable rect at (30,307) size 220x170)
+ (scrollable area parameters
+ (horizontal scroll elasticity 1)
+ (vertical scroll elasticity 1)
+ (horizontal scrollbar mode 0)
+ (vertical scrollbar mode 0)
+ (has enabled vertical scrollbar 1))
+ )
+ (Overflow scrolling node
+ (scrollable area size 220 170)
+ (contents size 220 1020)
+ (parent relative scrollable rect at (302,35) size 220x170)
+ (scrollable area parameters
+ (horizontal scroll elasticity 1)
+ (vertical scroll elasticity 1)
+ (horizontal scrollbar mode 0)
+ (vertical scrollbar mode 0)
+ (has enabled vertical scrollbar 1))
+ )
+ (Positioned node
+ (layout constraints
+ (layer-position-at-last-layout (10,30))
+ (positioning-behavior moves))
+ (related overflow nodes 1)
+ )
+ (Positioned node
+ (layout constraints
+ (layer-position-at-last-layout (110,50))
+ (positioning-behavior moves))
+ (related overflow nodes 1)
+ )
+ (Overflow scrolling node
+ (scrollable area size 220 170)
+ (contents size 220 1020)
+ (parent relative scrollable rect at (30,35) size 220x170)
+ (scrollable area parameters
+ (horizontal scroll elasticity 1)
+ (vertical scroll elasticity 1)
+ (horizontal scrollbar mode 0)
+ (vertical scrollbar mode 0)
+ (has enabled vertical scrollbar 1))
+ )
+ (Positioned node
+ (layout constraints
+ (layer-position-at-last-layout (10,30))
+ (positioning-behavior moves))
+ (related overflow nodes 1)
+ (children 1
+ (Positioned node
+ (layout constraints
+ (layer-position-at-last-layout (79,20))
+ (positioning-behavior stationary))
+ (related overflow nodes 1)
+ )
+ )
+ )
+ )
+)
+
+
Added: trunk/LayoutTests/scrollingcoordinator/scrolling-tree/positioned-nodes-complex-expected.txt (0 => 243211)
--- trunk/LayoutTests/scrollingcoordinator/scrolling-tree/positioned-nodes-complex-expected.txt (rev 0)
+++ trunk/LayoutTests/scrollingcoordinator/scrolling-tree/positioned-nodes-complex-expected.txt 2019-03-20 16:44:49 UTC (rev 243211)
@@ -0,0 +1,139 @@
+Scrolling content
+Stacking
+Scrolling content
+Containing
+Scrolling content
+Containing
+Stacking
+Scrolling content
+Scrolling content
+Stacking
+Containing
+Scrolling content
+Containing
+Stacking
+
+(Frame scrolling node
+ (scrollable area size 785 600)
+ (contents size 785 829)
+ (parent relative scrollable rect at (0,0) size 800x600)
+ (scrollable area parameters
+ (horizontal scroll elasticity 2)
+ (vertical scroll elasticity 2)
+ (horizontal scrollbar mode 0)
+ (vertical scrollbar mode 0)
+ (has enabled vertical scrollbar 1))
+ (layout viewport at (0,0) size 785x600)
+ (min layout viewport origin (0,0))
+ (max layout viewport origin (0,229))
+ (behavior for fixed 0)
+ (children 12
+ (Overflow scrolling node
+ (scrollable area size 205 155)
+ (contents size 210 1020)
+ (parent relative scrollable rect at (302,579) size 205x155)
+ (scrollable area parameters
+ (horizontal scroll elasticity 0)
+ (vertical scroll elasticity 0)
+ (horizontal scrollbar mode 0)
+ (vertical scrollbar mode 0)
+ (has enabled horizontal scrollbar 1)
+ (has enabled vertical scrollbar 1))
+ )
+ (Positioned node
+ (layout constraints
+ (layer-position-at-last-layout (10,28))
+ (positioning-behavior moves))
+ (related overflow nodes 1)
+ )
+ (Positioned node
+ (layout constraints
+ (layer-position-at-last-layout (10,46))
+ (positioning-behavior moves))
+ (related overflow nodes 1)
+ )
+ (Overflow scrolling node
+ (scrollable area size 205 155)
+ (contents size 210 1020)
+ (parent relative scrollable rect at (30,579) size 205x155)
+ (scrollable area parameters
+ (horizontal scroll elasticity 0)
+ (vertical scroll elasticity 0)
+ (horizontal scrollbar mode 0)
+ (vertical scrollbar mode 0)
+ (has enabled horizontal scrollbar 1)
+ (has enabled vertical scrollbar 1))
+ )
+ (Positioned node
+ (layout constraints
+ (layer-position-at-last-layout (10,28))
+ (positioning-behavior moves))
+ (related overflow nodes 1)
+ )
+ (Overflow scrolling node
+ (scrollable area size 205 155)
+ (contents size 205 1020)
+ (parent relative scrollable rect at (302,343) size 205x155)
+ (scrollable area parameters
+ (horizontal scroll elasticity 0)
+ (vertical scroll elasticity 0)
+ (horizontal scrollbar mode 0)
+ (vertical scrollbar mode 0)
+ (has enabled vertical scrollbar 1))
+ )
+ (Overflow scrolling node
+ (scrollable area size 205 155)
+ (contents size 205 1020)
+ (parent relative scrollable rect at (30,307) size 205x155)
+ (scrollable area parameters
+ (horizontal scroll elasticity 0)
+ (vertical scroll elasticity 0)
+ (horizontal scrollbar mode 0)
+ (vertical scrollbar mode 0)
+ (has enabled vertical scrollbar 1))
+ )
+ (Overflow scrolling node
+ (scrollable area size 205 155)
+ (contents size 210 1020)
+ (parent relative scrollable rect at (302,35) size 205x155)
+ (scrollable area parameters
+ (horizontal scroll elasticity 0)
+ (vertical scroll elasticity 0)
+ (horizontal scrollbar mode 0)
+ (vertical scrollbar mode 0)
+ (has enabled horizontal scrollbar 1)
+ (has enabled vertical scrollbar 1))
+ )
+ (Positioned node
+ (layout constraints
+ (layer-position-at-last-layout (10,28))
+ (positioning-behavior moves))
+ (related overflow nodes 1)
+ )
+ (Positioned node
+ (layout constraints
+ (layer-position-at-last-layout (110,46))
+ (positioning-behavior moves))
+ (related overflow nodes 1)
+ )
+ (Overflow scrolling node
+ (scrollable area size 205 155)
+ (contents size 205 1020)
+ (parent relative scrollable rect at (30,35) size 205x155)
+ (scrollable area parameters
+ (horizontal scroll elasticity 0)
+ (vertical scroll elasticity 0)
+ (horizontal scrollbar mode 0)
+ (vertical scrollbar mode 0)
+ (has enabled vertical scrollbar 1))
+ )
+ (Positioned node
+ (layout constraints
+ (layer-position-at-last-layout (10,28))
+ (positioning-behavior moves))
+ (related overflow nodes 1)
+ )
+ )
+)
+
+
Added: trunk/LayoutTests/scrollingcoordinator/scrolling-tree/positioned-nodes-complex.html (0 => 243211)
--- trunk/LayoutTests/scrollingcoordinator/scrolling-tree/positioned-nodes-complex.html (rev 0)
+++ trunk/LayoutTests/scrollingcoordinator/scrolling-tree/positioned-nodes-complex.html 2019-03-20 16:44:49 UTC (rev 243211)
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>
+ Test scrolling tree stucture with various positioning and clipping configurations
+ </title>
+ <style>
+ .container {
+ position: relative;
+ height: 250px;
+ width: 250px;
+ transform: translateZ(0);
+ border: 1px solid black;
+ margin: 10px;
+ float: left;
+ }
+
+ .scroller {
+ margin: 10px;
+ background-color: silver;
+ border: 1px solid black;
+ padding: 10px;
+ width: 200px;
+ height: 150px;
+ overflow: scroll;
+ }
+
+ .stacking-containing {
+ position: relative;
+ z-index: 0;
+ }
+
+ .stacking {
+ opacity: 0.75;
+ }
+
+ .containing {
+ position: relative;
+ }
+
+ .box {
+ width: 100px;
+ height: 100px;
+ background-color: blue;
+ }
+
+ .absolute {
+ position: absolute;
+ left: 100px;
+ }
+
+ .composited {
+ transform: translateZ(0);
+ background-color: orange;
+ }
+
+ .scrolling-content {
+ height: 1000px;
+ }
+ </style>
+ <script>
+ if (window.testRunner)
+ testRunner.dumpAsText();
+
+ if (window.internals)
+ window.internals.settings.setAsyncOverflowScrollingEnabled(true);
+
+ function doTest() {
+ if (window.internals)
+ document.getElementById('scrollingTree').innerText = window.internals.scrollingStateTreeAsText() + "\n";
+ }
+
+ window.addEventListener('load', doTest, false);
+ </script>
+ </head>
+ <body>
+ <div class="container">
+ <!-- containing block outside overflow, composited ancestor inside -->
+ <div class="scroller">
+ <div class="scrolling-content">
+ Scrolling content
+ <div class="stacking">
+ Stacking
+ <div class="absolute box"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="container">
+ <!-- composited outside overflow, containing block inside. -->
+ <div class="scroller">
+ <div class="scrolling-content">
+ Scrolling content
+ <div class="containing">
+ Containing
+ <div class="absolute box"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="container">
+ <!-- composited outside overflow, containing block outside. -->
+ <div class="scroller">
+ <div class="scrolling-content">
+ Scrolling content
+ <div class="absolute box"></div>
+ </div>
+ </div>
+ </div>
+ <div class="container">
+ <!-- containing block outside, composited ancestor outside. -->
+ <div class="containing">
+ Containing
+ <div class="stacking">
+ Stacking
+ <div class="scroller">
+ <div class="scrolling-content">
+ Scrolling content
+ <div class="absolute box"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="container">
+ <div class="scroller">
+ <div class="scrolling-content">
+ Scrolling content
+ <div class="stacking">
+ Stacking
+ <div class="containing">
+ Containing
+ <div class="absolute box"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="container">
+ <div class="scroller">
+ <div class="scrolling-content">
+ Scrolling content
+ <div class="containing">
+ Containing
+ <div class="stacking">
+ Stacking
+ <div class="absolute box"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <pre id="scrollingTree"></pre>
+ </body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (243210 => 243211)
--- trunk/Source/WebCore/ChangeLog 2019-03-20 16:41:15 UTC (rev 243210)
+++ trunk/Source/WebCore/ChangeLog 2019-03-20 16:44:49 UTC (rev 243211)
@@ -1,5 +1,37 @@
2019-03-20 Simon Fraser <[email protected]>
+ Some elements lag behind async overflow scrolling on palace-games.com
+ https://bugs.webkit.org/show_bug.cgi?id=195934
+
+ Reviewed by Zalan Bujtas.
+
+ The logic added in r242997 was wrong for an absolutely-positioned layer whose containig block was
+ inside an overflow:scroll, but whose compositing ancestor was outside. This is a case where
+ we need to make a Positioning node for the absolute layer, because it needs to move along
+ with the scrolled content.
+
+ There are six permutations of overflow, containing block and compositing ancestor that we care about.
+ Showing renderer (aka DOM) order, they are (where <- indicates child <- parent):
+
+ layer <- cb <- ca <- os -- no positioned node required
+ layer <- cb <- os <- ca -- compositing parent skips overflow, need a "Moved" Positioned node.
+ layer <- ov <- cb <- ca -- no positioned node required
+ layer <- ov <- ca <- cb -- no positioned node required
+ layer <- ca <- cb <- ov -- no positioned node required
+ layer <- ca <- ov <- cb -- containing block skips overflow, need a "Stationary" Positioned node.
+
+ [cb = containing block, ca = compositing ancestor, ov = overflow scroll]
+
+ Test: scrollingcoordinator/scrolling-tree/positioned-nodes-complex.html
+
+ * rendering/RenderLayer.cpp:
+ (WebCore::outputPaintOrderTreeRecursive):
+ * rendering/RenderLayerCompositor.cpp:
+ (WebCore::layerParentedAcrossCoordinatedScrollingBoundary):
+ (WebCore::RenderLayerCompositor::computeCoordinatedPositioningForLayer const):
+
+2019-03-20 Simon Fraser <[email protected]>
+
Explicitly trigger compositing for layers that need to be moved by ScrollingTreePositionedNodes
https://bugs.webkit.org/show_bug.cgi?id=195710
<rdar://problem/48867502>
Modified: trunk/Source/WebCore/rendering/RenderLayer.cpp (243210 => 243211)
--- trunk/Source/WebCore/rendering/RenderLayer.cpp 2019-03-20 16:41:15 UTC (rev 243210)
+++ trunk/Source/WebCore/rendering/RenderLayer.cpp 2019-03-20 16:44:49 UTC (rev 243211)
@@ -6746,7 +6746,7 @@
auto viewportConstrainedNodeID = backing.scrollingNodeIDForRole(WebCore::ScrollCoordinationRole::ViewportConstrained);
auto positionedNodeID = backing.scrollingNodeIDForRole(WebCore::ScrollCoordinationRole::Positioning);
- if (scrollingNodeID || frameHostingNodeID || viewportConstrainedNodeID) {
+ if (scrollingNodeID || frameHostingNodeID || viewportConstrainedNodeID || positionedNodeID) {
stream << " {";
bool first = true;
if (scrollingNodeID) {
Modified: trunk/Source/WebCore/rendering/RenderLayerCompositor.cpp (243210 => 243211)
--- trunk/Source/WebCore/rendering/RenderLayerCompositor.cpp 2019-03-20 16:41:15 UTC (rev 243210)
+++ trunk/Source/WebCore/rendering/RenderLayerCompositor.cpp 2019-03-20 16:44:49 UTC (rev 243211)
@@ -2922,12 +2922,15 @@
return false;
}
-// Is there scrollable overflow between this layer and its composited ancestor?
-static bool layerParentedAcrossCoordinatedScrollingBoundary(const RenderLayer& layer, const RenderLayer& compositedAncestor)
+// Is there scrollable overflow between this layer and its composited ancestor, and the containing block is the scroller or inside the scroller.
+static bool layerParentedAcrossCoordinatedScrollingBoundary(const RenderLayer& layer, const RenderLayer& compositedAncestor, bool checkContainingBlock, bool& containingBlockIsInsideOverflow)
{
ASSERT(layer.isComposited());
for (const auto* currLayer = layer.parent(); currLayer != &compositedAncestor; currLayer = currLayer->parent()) {
+ if (checkContainingBlock && currLayer->renderer().canContainAbsolutelyPositionedObjects())
+ containingBlockIsInsideOverflow = true;
+
if (currLayer->hasCompositedScrollableOverflow())
return true;
}
@@ -2951,17 +2954,17 @@
auto* compositedAncestor = layer.ancestorCompositingLayer();
auto& renderer = layer.renderer();
- if (renderer.isOutOfFlowPositioned() && renderer.style().position() == PositionType::Absolute) {
+ bool containingBlockCanSkipOverflow = renderer.isOutOfFlowPositioned() && renderer.style().position() == PositionType::Absolute;
+ if (containingBlockCanSkipOverflow) {
if (layerContainingBlockCrossesCoordinatedScrollingBoundary(layer, *compositedAncestor))
return ScrollPositioningBehavior::Stationary;
-
- return ScrollPositioningBehavior::None;
}
// 2. The layer's containing block is the overflow or inside the overflow:scroll, but its z-order ancestor is
// outside the overflow:scroll. In that case, we have to move the layer via the scrolling tree to make
// it move along with the overflow scrolling.
- if (layerParentedAcrossCoordinatedScrollingBoundary(layer, *compositedAncestor))
+ bool containingBlockIsInsideOverflow = !containingBlockCanSkipOverflow;
+ if (layerParentedAcrossCoordinatedScrollingBoundary(layer, *compositedAncestor, containingBlockCanSkipOverflow, containingBlockIsInsideOverflow) && containingBlockIsInsideOverflow)
return ScrollPositioningBehavior::Moves;
return ScrollPositioningBehavior::None;
