Bug 262367

Summary: Position absolute on div inside a table with overflow: hidden makes it invisible.
Product: WebKit Reporter: Dana B <danab>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Minor CC: ahmad.saleem792, bfulgham, karlcow, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 16   
Hardware: Mac (Apple Silicon)   
OS: macOS 13   
Attachments:
Description Flags
rendering in Safari, firefox, chrome
none
testcase
none
testcase 2
none
testcase 2 rendering in safari, firefox, chrome none

Dana B
Reported 2023-09-29 06:57:43 PDT
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
Attachments
rendering in Safari, firefox, chrome (421.10 KB, image/png)
2023-10-02 22:35 PDT, Karl Dubost
no flags
testcase (895 bytes, text/html)
2023-10-02 22:36 PDT, Karl Dubost
no flags
testcase 2 (989 bytes, text/html)
2023-10-02 23:06 PDT, Karl Dubost
no flags
testcase 2 rendering in safari, firefox, chrome (436.40 KB, image/png)
2023-10-02 23:09 PDT, Karl Dubost
no flags
Karl Dubost
Comment 1 2023-10-02 22:35:48 PDT
Created attachment 468037 [details] rendering in Safari, firefox, chrome
Karl Dubost
Comment 2 2023-10-02 22:36:32 PDT
Created attachment 468038 [details] testcase
Karl Dubost
Comment 3 2023-10-02 23:06:07 PDT
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
Karl Dubost
Comment 4 2023-10-02 23:07:16 PDT
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.
Karl Dubost
Comment 5 2023-10-02 23:09:18 PDT
Created attachment 468041 [details] testcase 2 rendering in safari, firefox, chrome
Simon Fraser (smfr)
Comment 6 2023-10-03 08:33:01 PDT
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.
Radar WebKit Bug Importer
Comment 7 2023-10-06 06:58:14 PDT
Ahmad Saleem
Comment 8 2024-12-12 15:04:40 PST
Fixed on WebKit ToT (287765@main).
Ahmad Saleem
Comment 9 2024-12-12 15:04:56 PST
*** This bug has been marked as a duplicate of bug 284567 ***
Note You need to log in before you can comment on or make changes to this bug.