Bug 262951

Summary: Nested overflow:auto has bad interaction with position:relative/absolute
Product: WebKit Reporter: Dan Wolff <webkit-bugs>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: bfulgham, simon.fraser, zalan
Priority: P2    
Version: Safari 17   
Hardware: iPhone / iPad   
OS: iOS 17   
Attachments:
Description Flags
Test case
none
Screenshot on iOS 17.0.3 none

Dan Wolff
Reported 2023-10-10 04:33:40 PDT
Created attachment 468144 [details] Test case Absolutely positioned elements should be displayed on top of statically positioned elements. When there is nested overflow:auto, the positioning is sometimes strange. In the following example, ELEMENT-A should be displayed on top of and potentially cover ELEMENT-B. <div style="position: relative; overflow: auto"> <div style="position: absolute" ELEMENT-A> SHOULD BE DISPLAYED ON TOP </div> <div style="overflow: auto" ELEMENT-B> SHOULD BE DISPLAYED UNDERNEATH </div> </div> The attached test case should only show a green viewport, but in affected browsers red text is visible. Affected: Safari on iOS 17.0.3. NOT affected: Safari on iOS 16.6.1.
Attachments
Test case (932 bytes, text/html)
2023-10-10 04:33 PDT, Dan Wolff 		no flags
Details
Screenshot on iOS 17.0.3 (157.50 KB, image/jpeg)
2023-10-10 04:35 PDT, Dan Wolff 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Dan Wolff
Comment 1 2023-10-10 04:35:05 PDT
Created attachment 468145 [details] Screenshot on iOS 17.0.3
Simon Fraser (smfr)
Comment 2 2023-10-10 17:24:11 PDT
Possibly fixed by bug 261302.
Simon Fraser (smfr)
Comment 3 2023-10-10 17:29:15 PDT
I confirmed that this is fixed on `main`. *** This bug has been marked as a duplicate of bug 261302 ***
Note You need to log in before you can comment on or make changes to this bug.