Bug 274654 – Transformed button can not be clicked

• Component: UI Events
• Status: RESOLVED CONFIGURATION CHANGED

[Krystof T]

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.

[Ahmad Saleem]

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'.

[Radar WebKit Bug Importer]

<rdar://problem/128684292>

[Alexey Proskuryakov]

Probably a dupe of one or more bugs that I'm relating.

[Abrar Rahman Protyasha]

We should be able to write a WPT for this.

[Ahmad Saleem]

Progressed in Safari 18.0, it is still happening on Safari 17.6 but not in Safari 18.0.1.