Bug - react onClick() doesn't work well on WKWebview - iOS 13

[Aarbel]

Context

Apple just realeased new version of WKWebview with iOS 13.
On my mobile app i don't use react native but pure React / HTML inside a Native Webview.

Problem

Touch events don't work well on onClick() since the update.
The user has to touch very fast to trigger the onClick(). If the use touches more than 200 / 300 ms it doesn't trigger the onClick()

Do you know a way to fix it ?

Thanks a lot for your help !

[jamesmosier]

You may find some of the answers here useful. Otherwise it may be more of a browser issue than a React issue. There is another potential workaround here.

[Aarbel]

Yes its more a browser issue, seems react fastclick doesn't work well on new Webkit version.
If you have other infos i would be glad to read them !

[Aarbel]

In fact i don't use fastclick

[andreyqin]

We've run into the exact same issue the other day. I could reproduce it on iPhone 11 Max Pro simulator in XCode but only when the app was getting zoomed in. Once I switched to the different simulator and then went back to the iPhone, I wasn't longer able to reproduce it. I did some digging into the issue and it looked like WKWebview couldn't have registered onClick callbacks for some reason whereas, for example, touchstart worked fine.

@Aarbel did you manage to figure out how to get it worked?

[Aarbel]

@andreyqin not yet, the onclick works well if you touch fast the screen.

So looks like it's a question of touchstart delay that trigger click events.

Very hard to find the origin and find a way to fix it.

[Aarbel]

The problem only occurs on WkWebview.

Works fine on iOS Safari.

Very weird.

[EddyVinck]

I'm also experiencing issues with click events on iOS 13.

I have onClick listeners on <div /> elements inside a portal. The events aren't fired on the first touch. The first touch only fires onTouchStart, and on the second touch onClick is fired, resulting in my multi-select component being unusable since you need to double tap every item.

The bug also breaks a button inside the portal.

The component works fine on iOS <13. I tested it using BrowserStack in Safari. Also works fine on Android.

iOS12 (click working as expected)

iOS13 (double click required, close button does not fire click event)

[EddyVinck]

@graouts perhaps this issue is related to some issues/WebKit changes you discussed in this issue?

WebKit bug #202143

[Aarbel]

Thank you @EddyVinck for the screenshots, glad to see people don't use React Native for simple responsive mobile web apps.
Have you tried with react-tappable to fix it ?

[EddyVinck]

@Aarbel Yeah this application is just a PWA server side rendered by DEITY Falcon and 'regular' React.

I haven't tried react-tappable yet. Did it fix the issues you were having in iOS13?

[Aarbel]

Very interesting. You distribute it on Stores or only PWA ?

[EddyVinck]

@Aarbel Only PWA, but this is for a demo project showcasing DEITY Falcon. Did you try react-tappable? Did it fix your issues with iOS13?

[Aarbel]

@EddyVinck not yet, just tested on wkwebview and seems to be stable. Will do it end of this week.

About PWA : you can wrap them in a native webview (with cordova for example) and ship them on the store. Few settings to set but works really great

[Aarbel]

@EddyVinck i can confirm you that react-tappable is a great solution 🎉
Indeed the tap works much better than previously (we the react onClick was working on iOS 12) because it is triggered even if the user holds the tappable element for a long time.

Could be great that React fully handle touch behavior with the onClick method or maybe a new onTap method.

[zhangyu0218]

I found a similar problem in ios 13 WKWebview. I wrote a function that listens for the number of onclicks (increment the value of each click, starting at 0), and when I first click the value becomes 2 instead of 1.

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any additional information, please include with in your comment!

[fusioneery]

Same problem: sometimes webview inside iOS app doesn't recognize fast touch on div, which has onClick handler appended

[gaearon]

Did anyone look into why this is happening?

[sbannigan]

I've run into this issue before with angular as well. It's also reproducible with plain javascript. As far as I know, it was a webkit bug that was introduced in iOS 13, then resolved in 13.2. As of iOS 13.4 it seems to be an issue again, I'm not sure why. This codepen is an easy way to see the issue.

[graouts]

@sbannigan If you encounter a bug in WebKit, especially with a simple test, please file a bug at bugs.webkit.org. Thanks.

[Aarbel]

@graouts the bug can also come from the way javascript handles the touch events. That's why HammerJs exist. Does React has to handle that ? For basic Clicks i think yes, as more and more projects are cross platforms.
Far harder to make the apple team fix it with their 20st century bug tracker (webkit bugzilla).

[graouts]

@Aarbel A member of the Apple team here! Hardest to fix bugs that aren't filed :)

[Aarbel]

@graouts sorry to be pushy, you should really internally convince Apple to leave webkit. I'm serious. And also allow Chromium webview in native iOS apps. I really don't understand why webkit is still maintained. Looks like a big waste of money with 0 strategic impact for Apple (it was strategic at the beginning, but now the "tech browser game" doesn't bring more retention for the business). So if i was working for Apple i would particularly investigate this subject and maybe save them loads of money. Microsoft made the move to Chromium. Most front-end developers are waiting for the move from Apple.

I'm working on crossplatform since 5 years. On every iOS release you introduce html / css / javascript bugs, and many are not yet solved (like the legendary input focus problems for example). We need to fix them every time, using javascript patches like hammerJS, big waste of time. Also a big pain for our users. You can contact me if you want the details of all the problems we faced.

About Bugzilla, i've posted this other issue 1 year and a half ago: https://bugs.webkit.org/show_bug.cgi?id=183870#c9, no news since 1 year. This tool is really horrible to track issues. Looks like it's really easy for you to miss them.

[graouts]

@Aarbel I won't debate the merits of Bugzilla, your point is taken though. However, it's harder still to track issues if they are not filed in the WebKit bug reporter in the first place.

[graouts]

Based on the information shared by @sbannigan, I filed WebKit bug 211179.

[Dom355]

I have the same issue. On Chrome and Safari mobile. On desktop, the button works fine.....

[sfonua10]

Yep, I'm experiencing the same issue with Chrome and Safari mobile. Chrome desktop onClick seems to work

[gaearon]

Seems like this has no relation to React so I'm closing.

[webb24h]

Seems like this has no relation to React so I'm closing.

I confirm this is not a react only issue as im using plain javascript and only href works. button and onclick events do not fire at all.

[Aarbel]

I highly recommend using Capacitor for your PWAs or mobile apps, the lib provides polyfills / fixes to build well your react apps (or other frameworks), and don't have mobile / desktop environment surprises