Bug 258886

Summary:

offsetParent is wrong for a nested element

Product:

WebKit

Reporter:

Kanaru Sato <i.am.kanaru.sato>

Component:

DOM

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

ahmad.saleem792, mike, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

WebKit Nightly Build

Hardware:

Mac (Apple Silicon)

OS:

macOS 13

URL:

https://jsfiddle.net/xjsm5489/show

See Also:

https://bugs.webkit.org/show_bug.cgi?id=19923
https://bugs.webkit.org/show_bug.cgi?id=253147

Attachments:

Description	Flags
this html produces the bug	none

Description Kanaru Sato 2023-07-05 08:41:08 PDT

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 :)

Comment 1 Kanaru Sato 2023-07-05 08:44:32 PDT

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

Comment 2 Ahmad Saleem 2023-07-05 11:28:20 PDT

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

Comment 3 zalan 2023-07-05 15:38:30 PDT

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.

Comment 4 Ahmad Saleem 2023-07-05 16:31:38 PDT

(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

Comment 5 zalan 2023-07-05 20:01:05 PDT

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. :/

Comment 6 Kanaru Sato 2023-07-09 22:03:44 PDT

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??

Comment 7 Radar WebKit Bug Importer 2023-07-12 08:42:17 PDT

<rdar://problem/112140677>

Comment 8 Ahmad Saleem 2023-07-29 06:30:54 PDT

(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.