Bug 186970 – AX: A non-hacky way to prevent pinchzoom on iOS Safari

• Status: RESOLVED
• Resolution: INVALID
• Component: Accessibility

[marvin danig]

The issue was discussed on Stackoverflow [1] and then on Github [2] and then on Twitter [3]. 

Outline: The clause `<meta name="viewport" content="width=device-width, user-scalable=no" />` to configure the viewport isn't working as per iOS Safari Documentation [4] and WCAG 2.1 (2018) guidelines [5], and doesn't help implement novel ideas or simple creative application/game development without using multiple javascript hacks or fail at it. 

Example: A responsive book reader [6] that paginates content using iframes. 

This is my own application where we need the clause above to work, as in to disable pinchzoom simply, and then manage scaling ourselves inside of iframes using CSS3 transforms instead of the native pinchzoom functionality. 

This was easy to implement on earlier versions of iOS Safari but now is impossible to do. All other mobile vendors and previous versions of iOS Safari handle this correctly. 

W3C working group's comment [7] on this issue is as follows:

"It is an author conformance requirement only, that does not forbid the use but does ask authors to consider seriously the curtailment of user's ability to zoom. What apple have done in safari is beyond the scope of this issue as it does not require anything of browser implementers." 

According to Apple, it is the arbitrary disablement of pinchzoom affecting accessibility that led them to withdraw this feature earlier, thus introducing a conformance bug as accessibility guidelines. The thread on twitter found: "The SHOULD vs. MUST issue remains… …follow the SHOULD and let bad sites sink on own & in face of opprobrium." apart from discussions elsewhere on Github and Stackoverflow.



[1] https://stackoverflow.com/questions/49589861/is-there-a-non-hacky-way-to-prevent-pinch-zoom-on-ios-11-3-safari
[2] https://github.com/w3c/html/issues/602 
[3] https://twitter.com/smfr/status/1010185392048361475
[4] https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
[5] https://github.com/arronei/html/commit/877b59cce9d4fa5b7ecb590334fe9fad95b7bd75 
[6] https://bubblin.io/book/the-solar-system-by-marvin-danig/1  
[7] https://github.com/w3c/html/issues/602#issuecomment-390490730

[Radar WebKit Bug Importer]

<rdar://problem/41397602>

[marvin danig]

*** Bug 186953 has been marked as a duplicate of this bug. ***

[Timothy Hatcher]

I believe the `touch-action` CSS property support in Safari on iOS 13 will let you do this on a per element basis.

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

Covered in this WWDC video around 22 minutes in:
https://developer.apple.com/videos/play/wwdc2019/203/