Created attachment 471496 [details] Repro case. Click on the button, check console or observe alert. ## What is broken: A button can't be clicked when multiple parent nodes have CSS transform property. Adding `pointerdown` listener to all the elements reveal that the last element (button #projected) doesn't receive any event. I SPECULATE: that the visual is different then the interaction mask. ## How to reproduce: I attach a clear HTML repro case where on Safari clicking the button doesn't pop the alert. Note: CSS Style is in head ## More Context: This html is the result of Three.js's CSS3DRenderer feature which puts html into a 3D perspective matching the engine's perspective camera. It utilizes 2 wrapper objects (#A, #B) with two `transform: matrix3d()` and other CSS translation properties. ## Reproduced in: - Safari iOS 17.5.1 (21F90) - iOS Chrome (125.0.6422.80) - iOS Firefox (126.1 (41973)) ## Works correctly in: - Android Chrome (125.0.6422.52) - Android Firefox (124.1.0) - Windows Chrome (125.0.6422.77) - Windows Firefox (126.0) ## Unconfirmed: - Playwright's Webkit (Playwright 1.44.1) -> There it transformed the button out of the screen. - Safari OS X -> A friend confirmed that it doesn't work for him. Unsure what OS version.
I am able to reproduce this in Safari 17.5 where click was not registered while Chrome Canary 127 and Firefox Nightly 128 are working fine and register click. Marking this as 'BrowserCompat'.
<rdar://problem/128684292>
Probably a dupe of one or more bugs that I'm relating.
We should be able to write a WPT for this.