| Summary: | Under certain CSS conditions, showing an element that overflows scroll re-renders fixed elements outside containers | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Stuart Watt <morungos> | ||||||
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | RESOLVED DUPLICATE | ||||||||
| Severity: | Normal | CC: | bfulgham, simon.fraser, zalan | ||||||
| Priority: | P2 | ||||||||
| Version: | Safari 16 | ||||||||
| Hardware: | Mac (Apple Silicon) | ||||||||
| OS: | macOS 12 | ||||||||
| Attachments: |
|
||||||||
Created attachment 464259 [details]
Test reduction
Great test case. Thanks for filing!
This has progressed somewhere between 252435@main and 254525@main. Progressed at 253865@main. *** This bug has been marked as a duplicate of bug 222132 *** |
Created attachment 464183 [details] A small HTML+CSS+JS file. When clicking the button, the button moves When using a position: fixed area to stick some buttons inside an overflow: auto area, showing additional content that overflows the scroll area can trigger the buttons moving, apparently outside their container by the relative offset. A small replication file is attached. What I've observed so far is: 1. Clicking the button, the text overflows the box, and this causes the inner position: fixed area to jump, by an amount approximately equal to the inner position: fixed area's relative offset within its parent. 2. This only happens when the height of the overflow: auto box is constrained, either by height: 100% or flex: 1 0. Without either, no issue. 3. This only happens when overflow: auto, or overflow: scroll is present. overflow: hidden and overflow: none do not have the same effect 4. It only seems to happen when there are nested position: fixed elements. Without either being fixed, no issue. 5. Safari Developer Tools still believe the elements are in their original location, i.e., you can select them in a different position from where they are rendered 6. Toggling almost any pseudo-class in the developer tools causes the elements to jump back to the correct location.