search

stardust66 / react-longpressable

Long-press component for React, with pointer events.
MIT License
10 stars 6 forks source link

Doesn't work on safari #1

Open marciogit opened 6 years ago

marciogit commented 6 years ago

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 commented 6 years ago

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 commented 4 years ago

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

stardust66 commented 4 years ago

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 commented 4 years ago

@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