Title: [266156] trunk
- Revision
- 266156
- Author
- [email protected]
- Date
- 2020-08-25 19:22:44 -0700 (Tue, 25 Aug 2020)
Log Message
Facebook post with lots of comments has cut off scrollbar, and can't scroll fully to the bottom (sticky)
https://bugs.webkit.org/show_bug.cgi?id=215719
<rdar://problem/66411757>
Reviewed by Simon Fraser.
Source/WebCore:
While computing the scrollable overflow for inflow positioned (or transformed) renderers, we need to take their paint geometry into
account so that scrolling matches their final positions.
e.g.
<div style="width: 100px; height: 100px;"></div>
<div style="position: relative; top: -20; width: 50px; height: 50px;"></div>
While the inflow positioned block box is placed right below the previous sibling div, visually they overlap each other.
If these boxes happen to be in a scrollable container, the scrolling should be driven by the overlapping state (paint geometry) and not
by the layout geometry (where the 2 boxes are placed vertically after each other).
While stickily positioned boxes are also considered inflow positioned, their initial inflow layout positions contribute to the scrollable overflow
as they are not stationary boxes.
Test: fast/css/scrollable-overflow-with-sticky-positioning.html
* rendering/RenderBox.cpp:
(WebCore::RenderBox::layoutOverflowRectForPropagation const):
LayoutTests:
* fast/css/scrollable-overflow-with-sticky-positioning-expected.html: Added.
* fast/css/scrollable-overflow-with-sticky-positioning.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (266155 => 266156)
--- trunk/LayoutTests/ChangeLog 2020-08-26 01:31:55 UTC (rev 266155)
+++ trunk/LayoutTests/ChangeLog 2020-08-26 02:22:44 UTC (rev 266156)
@@ -1,3 +1,14 @@
+2020-08-25 Zalan Bujtas <[email protected]>
+
+ Facebook post with lots of comments has cut off scrollbar, and can't scroll fully to the bottom (sticky)
+ https://bugs.webkit.org/show_bug.cgi?id=215719
+ <rdar://problem/66411757>
+
+ Reviewed by Simon Fraser.
+
+ * fast/css/scrollable-overflow-with-sticky-positioning-expected.html: Added.
+ * fast/css/scrollable-overflow-with-sticky-positioning.html: Added.
+
2020-08-25 Karl Rackler <[email protected]>
rdar://67764580 REGRESSION: [ BigSur ] 20 fast/ and tables/ tests are a constant failure
Added: trunk/LayoutTests/fast/css/scrollable-overflow-with-sticky-positioning-expected.html (0 => 266156)
--- trunk/LayoutTests/fast/css/scrollable-overflow-with-sticky-positioning-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css/scrollable-overflow-with-sticky-positioning-expected.html 2020-08-26 02:22:44 UTC (rev 266156)
@@ -0,0 +1,40 @@
+<style>
+#container {
+ height: 500px;
+ width: 500px;
+ overflow: scroll;
+ border: 1px solid black;
+}
+
+.nested {
+ height: 300px;
+ background-color: cyan;
+}
+
+.scrolly {
+ width: 100px;
+ height: 600px;
+ background-color: blue;
+ border-bottom: 10px solid green;
+}
+
+.relative {
+ bottom: 0px;
+ position: relative;
+ width: 100px;
+ height: 110px;
+ background-color: yellow;
+}
+
+</style>
+PASS if the green border is visible at the bottom of the red box.
+<div id=container>
+ <div class=nested>
+ <div class=scrolly></div>
+ <div class=relative></div>
+ </div>
+</div>
+
+<script>
+container.scrollTo(0, 240);
+</script>
Added: trunk/LayoutTests/fast/css/scrollable-overflow-with-sticky-positioning.html (0 => 266156)
--- trunk/LayoutTests/fast/css/scrollable-overflow-with-sticky-positioning.html (rev 0)
+++ trunk/LayoutTests/fast/css/scrollable-overflow-with-sticky-positioning.html 2020-08-26 02:22:44 UTC (rev 266156)
@@ -0,0 +1,40 @@
+<style>
+#container {
+ height: 500px;
+ width: 500px;
+ overflow: scroll;
+ border: 1px solid black;
+}
+
+.nested {
+ height: 300px;
+ background-color: cyan;
+}
+
+.scrolly {
+ width: 100px;
+ height: 600px;
+ background-color: blue;
+ border-bottom: 10px solid green;
+}
+
+.sticky {
+ bottom: 0px;
+ position: sticky;
+ width: 100px;
+ height: 110px;
+ background-color: yellow;
+}
+
+</style>
+PASS if the green border is visible at the bottom of the red box.
+<div id=container>
+ <div class=nested>
+ <div class=scrolly></div>
+ <div class=sticky></div>
+ </div>
+</div>
+
+<script>
+container.scrollTo(0, 240);
+</script>
\ No newline at end of file
Modified: trunk/Source/WebCore/ChangeLog (266155 => 266156)
--- trunk/Source/WebCore/ChangeLog 2020-08-26 01:31:55 UTC (rev 266155)
+++ trunk/Source/WebCore/ChangeLog 2020-08-26 02:22:44 UTC (rev 266156)
@@ -1,5 +1,32 @@
2020-08-25 Zalan Bujtas <[email protected]>
+ Facebook post with lots of comments has cut off scrollbar, and can't scroll fully to the bottom (sticky)
+ https://bugs.webkit.org/show_bug.cgi?id=215719
+ <rdar://problem/66411757>
+
+ Reviewed by Simon Fraser.
+
+ While computing the scrollable overflow for inflow positioned (or transformed) renderers, we need to take their paint geometry into
+ account so that scrolling matches their final positions.
+ e.g.
+
+ <div style="width: 100px; height: 100px;"></div>
+ <div style="position: relative; top: -20; width: 50px; height: 50px;"></div>
+
+ While the inflow positioned block box is placed right below the previous sibling div, visually they overlap each other.
+ If these boxes happen to be in a scrollable container, the scrolling should be driven by the overlapping state (paint geometry) and not
+ by the layout geometry (where the 2 boxes are placed vertically after each other).
+
+ While stickily positioned boxes are also considered inflow positioned, their initial inflow layout positions contribute to the scrollable overflow
+ as they are not stationary boxes.
+
+ Test: fast/css/scrollable-overflow-with-sticky-positioning.html
+
+ * rendering/RenderBox.cpp:
+ (WebCore::RenderBox::layoutOverflowRectForPropagation const):
+
+2020-08-25 Zalan Bujtas <[email protected]>
+
[LFC][IFC] Do not move the runs out of the LineBuilder while closing the line
https://bugs.webkit.org/show_bug.cgi?id=214790
Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (266155 => 266156)
--- trunk/Source/WebCore/rendering/RenderBox.cpp 2020-08-26 01:31:55 UTC (rev 266155)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2020-08-26 02:22:44 UTC (rev 266156)
@@ -4841,10 +4841,14 @@
rect.unite(layoutOverflowRect());
bool hasTransform = this->hasTransform();
- if (isInFlowPositioned() || hasTransform) {
+ // While a stickily positioned renderer is also inflow positioned, they stretch the overflow rect with their inflow geometry
+ // (as opposed to the paint geometry) because they are not stationary.
+ bool paintGeometryAffectsLayoutOverflow = hasTransform || (isInFlowPositioned() && !isStickilyPositioned());
+ if (paintGeometryAffectsLayoutOverflow) {
// If we are relatively positioned or if we have a transform, then we have to convert
// this rectangle into physical coordinates, apply relative positioning and transforms
// to it, and then convert it back.
+ // It ensures that the overflow rect tracks the paint geometry and not the inflow layout position.
flipForWritingMode(rect);
if (hasTransform && hasLayer())
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
