Open marciogit opened 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.
what would be the propery way to add this polyfill ? I'm not sure to understand the touch-action attribute
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.
@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
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!