RESOLVED DUPLICATE of bug 277122 286237
Different results on Chrome and Safari for absolutely positioned elements in relation to container-type:inline-size
https://bugs.webkit.org/show_bug.cgi?id=286237
Summary Different results on Chrome and Safari for absolutely positioned elements in ...
keir.watson
Reported 2025-01-19 08:13:06 PST
I have found an issue with using position:absolute, where Safari positions relative to an enclosing div with "container-type: inline-size" instead of the grandparent div with "position:relative" Chrome positions correctly (meaning, as I expected — I don't know what the spec says) in relation to the grandparent, ignoring the div with inline-size. I have made a simple CodePen demo here which can be checked on both browsers to see the difference in output: https://codepen.io/Everybodyknows/pen/gbYjEoY
Attachments
WebKit ToT (Reference) (527.23 KB, image/png)
2025-01-19 15:40 PST, Ahmad Saleem
no flags
Screen shot of bug on iOS 18.2.1 (808.13 KB, image/jpeg)
2025-01-20 01:13 PST, keir.watson
no flags
Ahmad Saleem
Comment 1 2025-01-19 15:40:34 PST
Created attachment 473949 [details] WebKit ToT (Reference) It seems to work fine on WebKit ToT (289139@main) and match Chrome Canary 134.
keir.watson
Comment 2 2025-01-20 01:13:48 PST
Created attachment 473952 [details] Screen shot of bug on iOS 18.2.1 It is also displayed incorrectly on mobile Safari iOS 18.2.1
zalan
Comment 3 2025-01-20 17:06:07 PST
This is a relatively recent change in spec (see https://github.com/w3c/csswg-drafts/issues/10544) and WebKit adopted this new behavior at 284730@main
zalan
Comment 4 2025-01-20 17:06:25 PST
*** This bug has been marked as a duplicate of bug 277122 ***
Note You need to log in before you can comment on or make changes to this bug.