React: Pointer Event's aren't registering touch on iOS while using Safari and Chrome

Created on 24 May 2018 · 8Comments · Source: facebook/react

Do you want to request a feature or report a bug?
I believe it's a bug.

What is the current behavior?
onPointerDown isn't registering when using Chrome and Safari on mobile. When viewing it as mobile within chrome's dev tools it works fine and will log touch for event.pointerType but on mobile it's unresponsive.

What is the expected behavior?
this.onPointerDown should register contact other than just mouse events while still covering mouse events. Below is a quick gif showing the correct behavior on the screen & in the console.

url if below isn't running
onPointerDown demo

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Browsers/OS : It's not working on iOS 11.3 for either Safari or Mobile.
Prior Versions?: No. Pointer Events are a new feature introduced in v16.4.

React 16.4 blog post

Source

tgrecojs

Most helpful comment

FYI this is under development by Safari/Apple: https://webkit.org/status/#?search=pointer%20events

sandstrom on 5 Oct 2018

🎉6 👍4

All 8 comments

Safari does not support Pointer events. https://caniuse.com/#feat=pointer

iamdustan on 24 May 2018

👍2 👎1

We deliberately decided against polyfilling pointer events in unsupported browsers (you can read up on that in the 16.4 release blog post) so this is unfortunately the expected behavior.

Chrome on iOS is also using the Safari rendering engine (WebKit) behind the scenes thus you see the same behavior there but not in the Google Chrome browser on macOS.

One solution to this is to use a third party polyfill, for example PEP. These solutions come with a few gotchas as well (in the case of PEP you can have a look here, here, here, and here) but should work fine for simple use cases.

philipp-spiess on 25 May 2018

👍3

"We have opted not to include such a polyfill in React DOM, to avoid an increase in bundle size." Why bother including any features then? You even say the behavior as you have defined it is unfortunate. Would it increase the bundle size by a huge amount or something? I'm not saying there is no valid reason to not include it in the bundle, but the reason of not wanting to increase bundle size isn't very transparent, as this reason could be applied to literally any existing feature of React.

esr360 on 17 Aug 2018

See my comment in https://github.com/facebook/react/pull/12507#issuecomment-382794779.

We have planned core features on the roadmap that we consider important to add to React. Given the community’s recent complaints about the growing bundle size, we have to be more strict about prioritising what gets in. Unfortunately it means that features that aren’t directly on our roadmap but require a lot of extra code will have a tougher chance of getting in.

Would it increase the bundle size by a huge amount or something?

I don’t know what you’d define by a “huge amount” but yes, comparatively event polyfills are already a significant part of React (almost half of it) and we currently can’t afford to grow this part further.

I’m sorry this is frustrating. I gave a talk about the core features we’re working on and are currently adding to React. I hope that if you watch it, you’ll see why we consider them more important than polyfills, and why, given the community’s focus on bundle size, we have to sacrifice how much we polyfill. Please trust me we’d love to polyfill those events if it was feasible.