Bug 262951 - Nested overflow:auto has bad interaction with position:relative/absolute
Summary: Nested overflow:auto has bad interaction with position:relative/absolute
Status: RESOLVED DUPLICATE of bug 261302
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 17
Hardware: iPhone / iPad iOS 17
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2023-10-10 04:33 PDT by Dan Wolff
Modified: 2023-10-10 17:29 PDT (History)
3 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Dan Wolff 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.
Comment 1 Dan Wolff 2023-10-10 04:35:05 PDT
Created attachment 468145 [details]
Screenshot on iOS 17.0.3
Comment 2 Simon Fraser (smfr) 2023-10-10 17:24:11 PDT
Possibly fixed by bug 261302.
Comment 3 Simon Fraser (smfr) 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 ***