| Summary: | Nested overflow:auto has bad interaction with position:relative/absolute | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Dan Wolff <webkit-bugs> | ||||||
| Component: | Layout and Rendering | Assignee: | 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: |
|
||||||||
Created attachment 468145 [details]
Screenshot on iOS 17.0.3
Possibly fixed by bug 261302. I confirmed that this is fixed on `main`. *** This bug has been marked as a duplicate of bug 261302 *** |
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.