Z-index not respected when using transform: translate

• Component: Compositing
• Status: NEW ---

[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?

[Radar WebKit Bug Importer]

<rdar://problem/76763050>