274654 2024-05-24 07:45:38 -0700 Transformed button can not be clicked 2024-10-26 00:54:03 -0700 1 1 1 Unclassified WebKit UI Events Safari 17 iPhone / iPad iOS 17 RESOLVED CONFIGURATION CHANGED https://bugs.webkit.org/show_bug.cgi?id=237470 https://bugs.webkit.org/show_bug.cgi?id=22787 https://bugs.webkit.org/show_bug.cgi?id=53695 https://bugs.webkit.org/show_bug.cgi?id=137313 3DTransformInterop, BrowserCompat, InRadar P2 Major --- 1 kipashmobile webkit-unassigned ahmad.saleem792 a_protyasha koivisto mattwoodrow simon.fraser webkit-bug-importer oldest_to_newest 2037631 0 471496 kipashmobile 2024-05-24 07:45:38 -0700 Created attachment 471496 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. 2037646 1 ahmad.saleem792 2024-05-24 08:53:54 -0700 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'. 2037647 2 webkit-bug-importer 2024-05-24 08:54:06 -0700 <rdar://problem/128684292> 2038079 3 ap 2024-05-27 10:39:27 -0700 Probably a dupe of one or more bugs that I'm relating. 2038246 4 a_protyasha 2024-05-28 12:18:15 -0700 We should be able to write a WPT for this. 2070717 5 ahmad.saleem792 2024-10-26 00:54:03 -0700 Progressed in Safari 18.0, it is still happening on Safari 17.6 but not in Safari 18.0.1. 471496 2024-05-24 07:45:38 -0700 2024-05-24 07:45:38 -0700 Repro case. Click on the button, check console or observe alert. ios_cant_button_click_after_multiple_transform.html text/html 1556 kipashmobile PGhlYWQ+DQogIDxzdHlsZT4NCiAgICAjY29udGFpbmVyIHsNCiAgICAgIG92ZXJmbG93OiBoaWRk ZW47DQogICAgICBwb2ludGVyLWV2ZW50czogYWxsOw0KICAgICAgcG9zaXRpb246IGFic29sdXRl Ow0KICAgICAgdG9wOiAwcHg7DQogICAgICB3aWR0aDogNzMzcHg7DQogICAgICBoZWlnaHQ6IDk5 NHB4Ow0KICAgIH0NCg0KICAgICNBIHsNCiAgICAgIHRyYW5zZm9ybS1zdHlsZTogcHJlc2VydmUt M2Q7DQogICAgICB3aWR0aDogNzMzcHg7DQogICAgICBoZWlnaHQ6IDk5NHB4Ow0KICAgICAgdHJh bnNmb3JtOiBwZXJzcGVjdGl2ZSgxMTk5Ljg2cHgpIHNjYWxlKDEpIHRyYW5zbGF0ZVooMTE5OS44 NnB4KSBtYXRyaXgzZCgtMC40MjcxMzksIC0wLjM4Nzg0OSwgLTAuODE2Nzc3LCAwLCAxLjY2MTg4 ZS0wNywgLTAuOTAzMzI5LCAwLjQyODk0OCwgMCwgMC45MDQxODYsIC0wLjE4MzIyMSwgLTAuMzg1 ODQ3LCAwLCAwLjE2Mjk0OCwgMC40NDg3ODMsIC00LjEyMzExLCAxKSB0cmFuc2xhdGUoMzY2LjVw eCwgNDk3cHgpOw0KICAgICAgcG9pbnRlci1ldmVudHM6IGFsbDsNCiAgICAgIGJhY2tmYWNlLXZp c2liaWxpdHk6IHZpc2libGU7DQogICAgfQ0KDQogICAgI0Igew0KICAgICAgcG9zaXRpb246IGFi c29sdXRlOw0KICAgICAgcG9pbnRlci1ldmVudHM6IGFsbDsNCiAgICAgIGJvcmRlci1yYWRpdXM6 IDIwcHg7DQogICAgICB1c2VyLXNlbGVjdDogbm9uZTsNCiAgICAgIGJhY2tmYWNlLXZpc2liaWxp dHk6IHZpc2libGU7DQogICAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1NSwgMCwgMCwgMC4z MzMpOw0KICAgICAgd2lkdGg6IDY3NnB4Ow0KICAgICAgaGVpZ2h0OiA1MTJweDsNCiAgICAgIHRy YW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC01MCUpIG1hdHJpeDNkKDYuNTQyMzllLTEwLCAzLjgz NzYxZS0xMCwgMC4wMDE5OTg5LCAwLCAtMC4wMDA1MjAwNDQsIC0wLjAwMTkzMDA3LCA1LjI4Mjky ZS0xMCwgMCwgLTAuMDAxOTMwMDcsIDAuMDAwNTIwMDQ0LCA1LjMzNTE4ZS0xMCwgMCwgMC41OTQ3 NzEsIDAuOTg2MTg2LCAtMC4wMDgwMDAwMiwgMSk7DQogICAgfQ0KDQogICAgI3Byb2plY3RlZCB7 DQogICAgICB3aWR0aDogMTAwJTsNCiAgICAgIGhlaWdodDogMTAwJTsNCiAgICAgIHBvaW50ZXIt ZXZlbnRzOiBhbGw7DQogICAgICB0b3VjaC1hY3Rpb246IG5vbmU7DQogICAgICBmb250LXNpemU6 IDUwcHg7DQogICAgICBjb2xvcjogd2hpdGU7DQogICAgICB1c2VyLXNlbGVjdDogdGV4dDsNCiAg ICAgIGJhY2tncm91bmQtY29sb3I6ICMwMGZmMDA4ODsNCiAgICB9DQogIDwvc3R5bGU+DQo8L2hl YWQ+DQo8Ym9keT4NCiAgPGRpdiBpZD0iY29udGFpbmVyIj4NCiAgICA8ZGl2IGlkPSJBIj4NCiAg ICAgIDxkaXYgaWQ9IkIiPg0KICAgICAgICA8YnV0dG9uIGlkPSJwcm9qZWN0ZWQiIG9uY2xpY2s9 ImNvbnNvbGUubG9nKCdDbGljaycpOyB3aW5kb3cuYWxlcnQoJ0NsaWNrJyk7Ij4NCiAgICAgICAg ICBDTElDSyBNRQ0KICAgICAgICA8L2J1dHRvbj4NCiAgICAgIDwvZGl2Pg0KICAgIDwvZGl2Pg0K ICA8L2Rpdj4NCjwvYm9keT4=