Bug 224374
| Summary: | Z-index not respected when using transform: translate | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Mark Fisher <mfishe> |
| Component: | Compositing | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | bfulgham, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 14 | ||
| Hardware: | Mac (Intel) | ||
| OS: | macOS 11 | ||
Mark Fisher
See this codepen: https://codepen.io/markfisher/pen/WNRdNZp
I have a table with sticky column headers and sticky row headers. The row headers use native "position: sticky". Since the table is in a container element with scroll overflow, I need to translate the thead element in a scroll handler as an alternative to native sticky.
In Chrome and Firefox (and I believe every browser other than Safari) the row headers correctly appear underneath the row headers, since the thead element has a higher z index than the row headers. However, in Safari, the row headers go above the column headers. I found this issue mentioned on Stackoverflow (though funnily enough I can't find any bug report quite matching this issue) and a workaround was suggested of using translateZ instead of z-index to achieve the desired effect. However, this workaround does not work when the table is in a container with scroll overflow, as in my codepen.
I presume this is a bug. Is there any workaround?
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/76763050>