bug: touch-action on ion-content prevents pinch zoom

[Ksan8]

Bug Report

Ionic version:
[ ] 4.x
[x] 5.x

Current behavior:
Zooming and scaling are disabled via a meta tag, making the app fail accessibility checks (such as axe browser extension). Users who rely on zooming/scaling in order to discern content have no option that makes the app usable.

Expected behavior:
The user should be able to zoom in and out at their discretion. After routing to a new page within the app, the scaling should be reset in order to provide a better user experience.

Steps to reproduce:

1. Clone ionicAngular (a minimal Ionic Angular app)
2. Run yarn in the app root to install packages
3. Install the axe browser extension if not already installed
4. Run ionic serve to open the app in the browser
5. Open DevTools and click on the axe tab
6. Choose "Scan all of my page"
7. Notice that "Zooming and scaling must not be disabled" is listed among the issues

Related code:

Sample Ionic Angular app: https://github.com/Ksan8/ionicAngular

This is the relevant code in index.html:

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Other information:

axe documentation: Zooming and scaling must not be disabled

Theoretically this issue could be fixed by changing the meta tag to include user-scalable=yes and either leaving out maximum-scale=1.0 or setting it much higher. If only this is done, however, it does not seem to fix the problem. Testing the app on an actual Android device, changing the scale via pinching & zooming does not work.

Ionic info:

Ionic:

   Ionic CLI                     : 6.12.3 (/Users/keziawineberg/.nvm/versions/node/v12.13.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.2
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.6
   @capacitor/core : 2.4.6

Utility:

   cordova-res                          : 0.15.2
   native-run (update available: 1.3.0) : 1.2.2

System:

   NodeJS : v12.13.1 (/Users/keziawineberg/.nvm/versions/node/v12.13.1/bin/node)
   npm    : 6.14.10
   OS     : macOS Big Sur

[liamdebeasi]

Thanks for the issue. user-scalable=no was set with Cordova/Capacitor apps in mind. For example with a native app, you can't pinch to zoom the entire app. These are set in the starter applications, and developers can remove these if they would like. I did some additional digging into why Chrome was still not allowing you to zoom:

• We have touch-action: pan-y set on ion-content which disables the browser's pinch to zoom gesture.
• Safari ignores user-scalable=no, but due to touch-action, pinch to zoom still does not work.
• Chrome listens to user-scalable=no as well as touch-action: pan-y.

So as for a workaround, you need to do two things:

1. Remove the user-scalable=no and maximum-scale parts of the meta tag.
2. Set the following CSS in global.scss:

ion-content::part(scroll) {
  touch-action: pan-y pinch-zoom;
}

After routing to a new page within the app, the scaling should be reset in order to provide a better user experience.

Unfortunately we do not have control over this as the zooming is handled by the OS. This is true of any Single Page App, not just Ionic Framework.

In terms of a fix, we can look into adding the pinch-zoom touch action to ion-content, but I need to make sure that it does not interfere with any gesture-based Ionic components.

[Ksan8]

As an additional note, enabling the zooming/scaling as mentioned above causes unpredictable behavior after routing. For example, if a user enters login info in an input on an iPhone (which zooms in for the input) and then is routed to the dashboard, the zoom never resets, meaning that parts of the page are cut off and/or not visible.

[willmartian]

Thank you for this issue! I have added a change to help with this, set to go live in Framework v6.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.