[Webkit-unassigned] [Bug 224374] New: Z-index not respected when using transform: translate

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=224374

            Bug ID: 224374
           Summary: Z-index not respected when using transform: translate
           Product: WebKit
           Version: Safari 14
          Hardware: Mac (Intel)
                OS: macOS 11
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: mfishe at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

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?

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20210409/81d48f97/attachment.htm>