Doesn't work on safari

[marciogit]

Hi guys!

I've been using the react-longpressable to develop an application at work and I realised that isn't working on safari, is there any chance to make it working on safari?

Thanks!

[stardust66]

Unfortunately, Safari doesn't support Pointer Events yet. React v16.4.0 release notes say this:

Please note that these events will only work in browsers that support the Pointer Events specification. (At the time of this writing, this includes the latest versions of Chrome, Firefox, Edge, and Internet Explorer.) If your application depends on pointer events, we recommend using a third-party pointer events polyfill. We have opted not to include such a polyfill in React DOM, to avoid an increase in bundle size.

So, you need a polyfill. I believe this is the best one: https://github.com/jquery/PEP.

[younes0]

what would be the propery way to add this polyfill ?
I'm not sure to understand the touch-action attribute

[stardust66]

You'd add it by including the polyfill script tag in your document. As of now, Safari (even iOS Safari) does support Pointer Events so I can't really test the polyfill anywhere. As far as I know, touch-action is meant to be a CSS property in the specs, but the polyfill uses it as an attribute instead. The polyfill README says that you should set the touch-action attribute on elements before they can generate touch events. The easiest is to probably do touch-action="none".

Here is a demo I found explaining what touch-action does. You can see how it works by running the site on a touch device: https://www.chenhuijing.com/touch-action/

Here is an explanation from the polyfill: https://github.com/jquery/PEP#touch-action

Here is its documentation of the CSS property in the specs: https://www.w3.org/TR/pointerevents/#the-touch-action-css-property

Let me know what problems you are running into.

[younes0]

@stardust66 thanks for your superb explanations !
Okay I will set touch-action="none" to the LongPress wrapped html element if I encounter problems with Safari < 13