Recently I faced the issue of trying to troubleshoot Kendo UI charts that stopped being able to freely pinch zoom with iPhones that were upgraded to iOS. It seems that the implementation of the Pointer Events API in Safari 13 is to blame.
Testing the issue, I could not reproduce it on Android, neither on Chrome nor Firefox. Immediately after the release of iOS 13, there were very minimal results from developers discussing web development quirks of the new release since it was so recent. The resource that finally helped it “click” for me was this stack overflow question. Buried in the comments was a reference to the
touch-action css property.
It seems that in the case of Kendo UI charts, some inline css was being output that set the
touch-action css property and the restricted set of gestures that would work.
In this case, I was able to restore the prior, unrestricted set of gestures to interact with Kendo UI charts by overriding the css:
touch-action: auto !important;
Given proper control over the markup, this issue could also be resolved by preventing the inline styling from being output in the first place or changing the value being set.
Hopefully if you find yourself in the position of trying to fix a similar issue with touch gestures in Safari on iOS 13, you’ll find a similar change fixes your problem. In this case, it seems that not having the features implemented resulted in different behavior than what was intended. Once the update was released, the behavior changed and it became appropriate to change the code to align with the intentions for user experience.