224374 2021-04-09 09:06:20 -0700 Z-index not respected when using transform: translate 2021-04-16 09:07:18 -0700 1 1 1 Unclassified WebKit Compositing Safari 14 Mac (Intel) macOS 11 NEW InRadar P2 Normal --- 1 mfishe webkit-unassigned bfulgham simon.fraser webkit-bug-importer zalan oldest_to_newest 1748751 0 mfishe 2021-04-09 09:06:20 -0700 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? 1751097 1 webkit-bug-importer 2021-04-16 09:07:18 -0700 <rdar://problem/76763050>