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: 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:
Description Flags
rendering in Safari, firefox, chrome
none
testcase
none
testcase 2
none
testcase 2 rendering in safari, firefox, chrome none

Description Dana B 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
Comment 1 Karl Dubost 2023-10-02 22:35:48 PDT
Created attachment 468037 [details]
rendering in Safari, firefox, chrome
Comment 2 Karl Dubost 2023-10-02 22:36:32 PDT
Created attachment 468038 [details]
testcase
Comment 3 Karl Dubost 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
Comment 4 Karl Dubost 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.
Comment 5 Karl Dubost 2023-10-02 23:09:18 PDT
Created attachment 468041 [details]
testcase 2 rendering in safari, firefox, chrome
Comment 6 Simon Fraser (smfr) 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.
Comment 7 Radar WebKit Bug Importer 2023-10-06 06:58:14 PDT
<rdar://problem/116578898>