Bug 258886 – offsetParent is wrong for a nested element

• Status: NEW
• Component: DOM

[Kanaru Sato]

Created attachment 466934 [details]
this html produces the bug

Hi, hope you all are well :)

I found offsetParent is wrong for a bit nested element.

In the attached HTML, the offsetParent of the div element with id, "target", should be the span with id, "offsetParent".
But the webkit(265767@main) recognizes the offsetParent is the span with id, "not-offsetParent".

It affects many libraries which insert elements with consideration of setting position properties correctly.
This kind of library, e.g. floating UI, detects offsetParents of elements and calculates the position related properties of element to be inserted.
(floating UI: https://github.com/floating-ui/floating-ui)

FYI: I found the offsetParent is correctly set when you remove the parent element(div) of the element with id, "target". But idk this helps debug.

Thank you for checking this report and look forward to your reply :)

[Kanaru Sato]

I've already checked chrome and firefox correctly recognize the offsetParent...!

[Ahmad Saleem]

I am able to reproduce this bug on WebKit ToT (265772@main) and Safari 16.5.1, so it might not be recent regression.

[alan]

This is caused by the continuation tree structure (caused by the inline level element's block level child <span><div>) where we fail to follow the continuation chain for our containing block.

[Ahmad Saleem]

(In reply to zalan from comment #3)
> This is caused by the continuation tree structure (caused by the inline
> level element's block level child <span><div>) where we fail to follow the
> continuation chain for our containing block.

By any chance, is this relevant WPT?

http://wpt.live/css/cssom-view/offsetParent-block-in-inline.html

[alan]

yeah(In reply to Ahmad Saleem from comment #4)
> (In reply to zalan from comment #3)
> > This is caused by the continuation tree structure (caused by the inline
> > level element's block level child <span><div>) where we fail to follow the
> > continuation chain for our containing block.
> 
> By any chance, is this relevant WPT?
> 
> http://wpt.live/css/cssom-view/offsetParent-block-in-inline.html
yah, it's all about continuation. :/

[Kanaru Sato]

Thank you for giving replies :)

I'd like to debug and fix it. Could I try that?
According to your guess, I will take a look on the below parts of WebKit.
- `RenderObject::offsetParent()`
- `RenderElement::canContainAbsolutelyPositionedObjects()`

BTW, should I refer to the below page for how to debug webkit?
https://webkit.org/debugging-webkit/
Actually, I'd tried to build and run webkit on local before according to this link, and didn't succeed...TT

If there was the better or latest document, could you please give me that??

[Radar WebKit Bug Importer]

<rdar://problem/112140677>

[Ahmad Saleem]

(In reply to Kanaru Sato from comment #6)
> Thank you for giving replies :)
> 
> I'd like to debug and fix it. Could I try that?
> According to your guess, I will take a look on the below parts of WebKit.
> - `RenderObject::offsetParent()`
> - `RenderElement::canContainAbsolutelyPositionedObjects()`
> 
> BTW, should I refer to the below page for how to debug webkit?
> https://webkit.org/debugging-webkit/
> Actually, I'd tried to build and run webkit on local before according to
> this link, and didn't succeed...TT
> 
> If there was the better or latest document, could you please give me that??

I think you can try bug 253147, which has more details in where the culprit code is and also potential Blink merge candidate.

Also can you share your steps and what error you faced? Also join WebKit Slack Channel to get more help and support on how to build local WebKit test environment.

[Ahmad Saleem]

Solved with `Block-in-inline` work.