| Summary: | Position absolute on div inside a table with overflow: hidden makes it invisible. | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Dana B <danab> | ||||||||||
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||||||||
| Status: | NEW --- | ||||||||||||
| Severity: | Minor | CC: | bfulgham, karlcow, simon.fraser, webkit-bug-importer, zalan | ||||||||||
| Priority: | P2 | Keywords: | BrowserCompat, InRadar | ||||||||||
| Version: | Safari 16 | ||||||||||||
| Hardware: | Mac (Apple Silicon) | ||||||||||||
| OS: | macOS 13 | ||||||||||||
| Attachments: |
|
||||||||||||
Created attachment 468037 [details]
rendering in Safari, firefox, chrome
Created attachment 468038 [details]
testcase
Created attachment 468040 [details]
testcase 2
in testcase 2, I changed a bit the parameter so we better see the effect of the position absolute vs overflow-y: hidden
I'm not sure what is the right behavior here. The overflow-y: hidden would invite me to believe that Safari has the right behavior. Created attachment 468041 [details]
testcase 2 rendering in safari, firefox, chrome
This is about whether the <table> is considered to be a containing block ancestor of the relpos/abspos; clipping should only be applied by ancestor containing blocks. WebKit is probably wrong here. |
Given the following HTML and CSS in Safari you will not see the `#pop` div. It is not clear to me whether this is right or not (spec wise), but it is different than Firefox and Chrome's handling. If you remove the `position: relative` or change it to anything else besides `position: sticky` you *will* see the green box on all browsers. ``` <style> table { overflow-y: hidden; } #wrap { /* The presence of this relative changes the output in Safari 16.5 */ position: relative; } #pop { position: absolute; top: 30px; left: 0; width: 200px; padding: 10px; background: green; } </style> <table> <tbody> <tr> <td> <div id="wrap"> Hello <div id="pop"> Should you see me? </div> </td> </tr> </tbody> </table> ``` https://codepen.io/danab/pen/qBLKjqZ