Bug 258565

Summary:

REGRESSION (257509@main): Tap event not registering on 3d transformed div

Product:

WebKit

Reporter:

Adam Bernath <bernath.adam>

Component:

UI Events

Assignee:

Matt Woodrow <mattwoodrow>

Status:

RESOLVED FIXED

Severity:

Critical

CC:

a_protyasha, mattwoodrow, richard_robinson2, simon.fraser, volkov.slava31, webkit-bug-importer, wenson_hsieh, zalan

Priority:

Keywords:

InRadar

Version:

Safari 16

Hardware:

iPhone / iPad

OS:

iOS 16

See Also:

https://bugs.webkit.org/show_bug.cgi?id=229141

Bug Depends on:

Bug Blocks:

265309

Attachments:

Description	Flags
Test reduction	none

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?