Bug 255028

Summary: transform-style: preserve-3d prevents links when :after has negative z-index
Product: WebKit Reporter: Priit Pirita <atirip>
Component: Layout and RenderingAssignee: Matt Woodrow <mattwoodrow>
Status: RESOLVED FIXED    
Severity: Normal CC: bfulgham, mattwoodrow, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: 3DTransformInterop, InRadar
Version: Safari 16   
Hardware: Mac (Apple Silicon)   
OS: macOS 12   
Attachments:
Description Flags
standalone html that explains the bug none

Description Priit Pirita 2023-04-05 06:01:02 PDT 
Created attachment 465775 [details]
standalone html that explains the bug

Latest Safari Version 16.4 (17615.1.26.101.9, 17615)

When element has transform-style: preserve-3d set, then :after pseudo element with negative z-index always prevents links to be clicked. They are visible and all, rendered as in another browsers, but not clickable.
In current Safari, also transformZ is buggy and does not move :after behind the element, this is fixed in current STP Release 166 (Safari 16.4, WebKit 17616.1.6.11),
but links are not clickable still. Current effective workaround is to set pointer-events: none; for :after pseudo element.

Current Chrome and Firefox are identical and work as expected in all cases.

There is codepen that explains: https://codepen.io/atirip/pen/ZEqzVBV

Attachment has standalone html.
Comment 1 Radar WebKit Bug Importer 2023-04-05 12:04:56 PDT 
<rdar://problem/107671388>
Comment 2 Matt Woodrow 2023-04-07 10:49:28 PDT 
Pull request: https://github.com/WebKit/WebKit/pull/12516
Comment 3 EWS 2023-04-07 13:33:18 PDT 
Committed 262728@main (048b254e9fd9): <https://commits.webkit.org/262728@main>

Reviewed commits have been landed. Closing PR #12516 and removing active labels.