Search code examples
iossafarizoomingviewportpinchzoom

Disable pinch zoom on IOS 13 safari

I know this question has been asked so much. But have there been any updates on being able to disable pinch zoom on the latest version of safari?

I have a map application that implements pinch to zoom on specific elements of the webpage (the map). I want users to be able to zoom in on the map, while the UI around the page stays the same. This has destroyed my users experience on IOS.

Is there a way to at least disable pinch to zoom on specific elements?

Here is my webpage so you can see exactly what I'm talking about. I hope you can see why disabling viewport zoom (at least when the user pinches on the map) would actually be a benefit, for accessibility.

https://www.yapms.com/app/?t=USA_2020_presidential

more info: I'm using hammerjs to zoom in on specific elements on the webpage already, so I want to disable apples viewport zoom on those elements.

Solution

  • None, of the JavaScript solutions worked for me. What I did to fix the issue on IOS was to add the following CSS to each element that I wanted to prevent the default zoom action on.

    touch-action: none;