Title: [266553] branches/safari-610-branch
- Revision
- 266553
- Author
- alanc...@apple.com
- Date
- 2020-09-03 14:31:12 -0700 (Thu, 03 Sep 2020)
Log Message
Cherry-pick r266156. rdar://problem/68168945
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.
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@266156 268f45cc-cd09-0410-ab3c-d52691b4dbfc
Modified Paths
Added Paths
Diff
Modified: branches/safari-610-branch/LayoutTests/ChangeLog (266552 => 266553)
--- branches/safari-610-branch/LayoutTests/ChangeLog 2020-09-03 21:31:09 UTC (rev 266552)
+++ branches/safari-610-branch/LayoutTests/ChangeLog 2020-09-03 21:31:12 UTC (rev 266553)
@@ -1,5 +1,55 @@
2020-09-03 Alan Coon <alanc...@apple.com>
+ Cherry-pick r266156. rdar://problem/68168945
+
+ 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.
+
+
+ git-svn-id: https://svn.webkit.org/repository/webkit/trunk@266156 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+ 2020-08-25 Zalan Bujtas <za...@apple.com>
+
+ 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-09-03 Alan Coon <alanc...@apple.com>
+
Cherry-pick r266158. rdar://problem/67812825
Web Share API Level 2 functions even when its experimental feature flag is disabled
Added: branches/safari-610-branch/LayoutTests/fast/css/scrollable-overflow-with-sticky-positioning-expected.html (0 => 266553)
--- branches/safari-610-branch/LayoutTests/fast/css/scrollable-overflow-with-sticky-positioning-expected.html (rev 0)
+++ branches/safari-610-branch/LayoutTests/fast/css/scrollable-overflow-with-sticky-positioning-expected.html 2020-09-03 21:31:12 UTC (rev 266553)
@@ -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: branches/safari-610-branch/LayoutTests/fast/css/scrollable-overflow-with-sticky-positioning.html (0 => 266553)
--- branches/safari-610-branch/LayoutTests/fast/css/scrollable-overflow-with-sticky-positioning.html (rev 0)
+++ branches/safari-610-branch/LayoutTests/fast/css/scrollable-overflow-with-sticky-positioning.html 2020-09-03 21:31:12 UTC (rev 266553)
@@ -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: branches/safari-610-branch/Source/WebCore/ChangeLog (266552 => 266553)
--- branches/safari-610-branch/Source/WebCore/ChangeLog 2020-09-03 21:31:09 UTC (rev 266552)
+++ branches/safari-610-branch/Source/WebCore/ChangeLog 2020-09-03 21:31:12 UTC (rev 266553)
@@ -1,5 +1,71 @@
2020-09-03 Alan Coon <alanc...@apple.com>
+ Cherry-pick r266156. rdar://problem/68168945
+
+ 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.
+
+
+ git-svn-id: https://svn.webkit.org/repository/webkit/trunk@266156 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+ 2020-08-25 Zalan Bujtas <za...@apple.com>
+
+ 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-09-03 Alan Coon <alanc...@apple.com>
+
Cherry-pick r266144. rdar://problem/68168942
When using airplay with Youtube, the Youtube tab becomes completely empty and is unresponsive for an extended period of time if we switch the tab
Modified: branches/safari-610-branch/Source/WebCore/rendering/RenderBox.cpp (266552 => 266553)
--- branches/safari-610-branch/Source/WebCore/rendering/RenderBox.cpp 2020-09-03 21:31:09 UTC (rev 266552)
+++ branches/safari-610-branch/Source/WebCore/rendering/RenderBox.cpp 2020-09-03 21:31:12 UTC (rev 266553)
@@ -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
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
