Bug 262367 - Position absolute on div inside a table with overflow: hidden makes it invisible.
Summary: Position absolute on div inside a table with overflow: hidden makes it invisi...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 16
Hardware: Mac (Apple Silicon) macOS 13
: P2 Minor
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2023-09-29 06:57 PDT by Dana B
Modified: 2023-10-06 06:58 PDT (History)
5 users (show)

See Also:


Attachments
rendering in Safari, firefox, chrome (421.10 KB, image/png)
2023-10-02 22:35 PDT, Karl Dubost
no flags Details
testcase (895 bytes, text/html)
2023-10-02 22:36 PDT, Karl Dubost
no flags Details
testcase 2 (989 bytes, text/html)
2023-10-02 23:06 PDT, Karl Dubost
no flags Details
testcase 2 rendering in safari, firefox, chrome (436.40 KB, image/png)
2023-10-02 23:09 PDT, Karl Dubost
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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>