Bug 272825 – relative inline box should play well with out-of-flow positionning

• Component: Layout and Rendering
• Status: NEW

[paladox]

Created attachment 470956 [details]
Video of the issue

Hi, there appears to be a bug. See linked video and you can reproduce using https://gerrit-review.googlesource.com/c/gerrit/+/420877.

It works in chrome.

Essentially it appears that there's a bug with position absolute? Using web developer tools and writing position relative and then remove it fixed it?

Sorry that that the title isn't really description, I'm just not sure how to fully describe the problem or how to reproduce it other then in that link.

[paladox]

Created attachment 470957 [details]
Screenshot of issue under safari

[paladox]

Created attachment 470958 [details]
Screenshot of it working under chrome

[Radar WebKit Bug Importer]

<rdar://problem/126649049>

[Karl Dubost]

Created attachment 470972 [details]
rendering in safari, firefox, chrome

Safari Technology Preview  192           19619.1.8.1
Firefox Nightly            127.0a1       12724.4.15
Google Chrome Canary       126.0.6424.0  6424.0

[Karl Dubost]

My first attempt at a reduced testcase focusing on this part of the code didn't reproduce the issue so there is some interaction of some sorts. I need to try further.

[Karl Dubost]

The Web Inspector is having an issue with this markup/CSS and it makes it harder to investigate.

[zalan]

Created attachment 470978 [details]
Test reduction

[zalan]

This is caused by WebKit's continuation structure where the out-of-flow block gets to the "post" part of the continuation (initiated by the previous sibling in-flow block) and while at layout we compute its "containing block relative" position correctly (0, 0), at paint time renderer's (0, 0) position is applied relative to the post block anonymous container.

<div><span><div>X</div><div class=out_of_flow>X</div></span></div>

B---YGLS---* RenderView at (0,0) size 776x549 renderer (0x1500042c0)
B-----LS---    HTML RenderBlock at (0,0) size 776x549 renderer (0x1500057e0)
B----------      BODY RenderBody at (8,8) size 760x533 renderer (0x150005a90)
B----------        DIV RenderBlock at (0,0) size 760x18 renderer (0x150006c40)
B---YG-----          RenderBlock at (0,0) size 760x0 renderer (0x150007410)
IR----L----            SPAN RenderInline  (0.00, 0.00) renderer (0x150006da0) continuation->(0x150007160)
BR--YGL----          RenderBlock at (0,0) size 760x18 renderer (0x150007160) continuation->(0x1500076d0)
B----------            DIV RenderBlock at (0,0) size 760x18 renderer (0x150007000)
I----------              #text RenderText renderer (0x150007930)
B---YG-----          RenderBlock at (0,18) size 760x0 renderer (0x150007570)
IR----L----            SPAN RenderInline  (0.00, 0.00) renderer (0x1500076d0)
BA----L----              DIV RenderBlock at (0,0) size 13.56x20 renderer (0x150007a00)
I----------                #text RenderText renderer (0x150007cb0)

[paladox]

Wondering if you'll be able to fix it please? :)

[zalan]

there are a few candidates here:
1, implement "block-inline" mixin FC so that we don't need continuation anymore (this is a large project)
2, keep using continuation but
  a, have all non-statically positioned out-of-flow boxes under the "pre" block (this makes render tree builder more complicated as we won't be following DOM order anymore (e.g. beforeChild needs special handling)
  b, at layout time while computing top position (relative to its in-flow positioned RenderInline containing block) offset it by the PRE block position (essentially it means a negative computed logical top position as PRE is always above the POST block where the out of flow box is)
  c, keep relative position as is and adjust the absolute position every time we compute it (e.g. element.getBoundingClientRect and/or painting, hittesting etc).

@antti, what do you think?

[zalan]

d, let container return the first RenderInline

This fixes getBoundingClientRect&co but painting still has the offset.

diff --git a/Source/WebCore/rendering/RenderObject.cpp b/Source/WebCore/rendering/RenderObject.cpp
index f8f9fbb48e40..8e654ff204e5 100644
--- a/Source/WebCore/rendering/RenderObject.cpp
+++ b/Source/WebCore/rendering/RenderObject.cpp
@@ -1769,6 +1769,12 @@ static inline RenderElement* containerForElement(const RenderObject& renderer, c
             if (repaintContainerSkipped && repaintContainer == parent)
                 *repaintContainerSkipped = true;
         }
+        if (auto* parentRenderBoxModelObject = dynamicDowncast<RenderBoxModelObject>(parent.get())) {
+            for (auto* previousNode = parentRenderBoxModelObject->continuationChainNode(); previousNode; previousNode = previousNode->previous) {
+                if (!previousNode->previous)
+                    return previousNode->renderer.get();
+            }
+        }
         return parent.get();
     }
     for (; parent && !parent->canContainFixedPositionObjects(); parent = parent->parent()) {

[paladox]

Any progress? :)