Bug 258565 - REGRESSION (257509@main): Tap event not registering on 3d transformed div
Summary: REGRESSION (257509@main): Tap event not registering on 3d transformed div
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: UI Events (show other bugs)
Version: Safari 16
Hardware: iPhone / iPad iOS 16
: P2 Critical
Assignee: Matt Woodrow
URL:
Keywords: InRadar
Depends on:
Blocks: 265309
  Show dependency treegraph
 
Reported: 2023-06-27 06:53 PDT by Adam Bernath
Modified: 2023-11-27 21:42 PST (History)
8 users (show)

See Also:


Attachments
Test reduction (473 bytes, text/html)
2023-06-28 09:58 PDT, zalan
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Adam Bernath 2023-06-27 06:53:11 PDT
Dear Webkit team,

The latest iOS version does not register the same tap events as the previous versions did (tested on 14.8.1 and it also worked on the previous major iOS version 15 - before updating my phone to the latest one that is 16.5.1 at the time of writing).
Here is a site that you can test it on with different ios safari versions:
https://app.referric.com

When you tap the "..." buttons the divs turn 180 degrees with css transform, and the back side of the divs contain information and buttons which worked without any issue (and still works in older ios safari browsers), but the current version is not registering the same touch events and the links are not tappable, while on older ios safari browsers (eg 14.8.1) you can turn back the card with the "x" button.

Please look into this issue, as I have no idea where else to turn for help, my business is relying on iOS safari users, and would really appreciate some help.
Comment 1 Radar WebKit Bug Importer 2023-06-27 08:50:59 PDT
<rdar://problem/111393557>
Comment 2 zalan 2023-06-28 09:10:53 PDT
Regressed at https://commits.webkit.org/257509@main
Comment 3 zalan 2023-06-28 09:18:48 PDT
https://commits.webkit.org/257255@main (Make hit-testing changes for css 3d transforms interop) might be the actual regression point.
Comment 4 zalan 2023-06-28 09:58:06 PDT
Created attachment 466845 [details]
Test reduction
Comment 5 zalan 2023-06-28 11:57:23 PDT
hittest on (double) rotated boxes works fine in flat space. Things start breaking when "transform-style" is "preserve-3d".
Comment 6 Adam Bernath 2023-07-05 02:19:37 PDT
Hi, any update on this issue?

I can see its a problem of the 3d transform - but it wasnt an issue in earlier versions - even tried with the -webkit- equivalent, didnt help (although that is something that was an issue many years ago, and was fixed to work without the webkit prefix, if I'm not mistaken).
Comment 7 Matt Woodrow 2023-07-10 14:20:09 PDT
Pull request: https://github.com/WebKit/WebKit/pull/15707
Comment 8 EWS 2023-07-23 18:55:09 PDT
Committed 266237@main (1aa517d47471): <https://commits.webkit.org/266237@main>

Reviewed commits have been landed. Closing PR #15707 and removing active labels.
Comment 9 Adam Bernath 2023-07-24 01:32:52 PDT
Thank you, I've seen the progress, unfortunately there are still some issues:

- when transforming around the Y axis (ios safari https://app.referric.com) it partially works, I can flip back the cards, but the small link still dont get a tap event (terms and conditions above the cta)

- when transforming around the X axis it is still not getting events and no way to turn back the cards (ios safari eg. https://www.nyacasino.se) - other events also not firing on the back face (cta, terms link, x button)

Can you please look into it?
Comment 10 Matt Woodrow 2023-07-25 20:44:13 PDT
The fix here has only been merged into WebKit, it hasn't shipped in an iOS Safari release yet.

Both of those sites should work correctly when it does.
Comment 11 Adam Bernath 2023-07-26 06:12:12 PDT
(In reply to Matt Woodrow from comment #10)
> The fix here has only been merged into WebKit, it hasn't shipped in an iOS
> Safari release yet.
> 
> Both of those sites should work correctly when it does.

okay, makes sense - what do you think when will that happen roughly?