Double Tap Zoom Ignoring meta and css button selector

Ionic Framework Ionic React
1

Hello. I’ve seen others mention this issue from several years ago, but I couldn’t find an actual resolution.

I’m having an issue where my application is sometimes requiring a user to tap a button multiple times, and it is causing it to zoom in (Safari, iOS 17.5.1). I have not been able to test it on any other touch enabled device.

I’ve updated the meta tag in index.html to <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" />, and it makes no difference.

I’ve set the touch-activity of buttons (and all elements while trying to fix the problem) to manipulation and none with no effect. The browser completely ignores these things and zooms on double tap anyway.

The repo for the project I’m working on:

You can try the double tapping on mobile on the live app hosted on Vercel:
https://dice-roller-smoky.vercel.app/

It is most obvious when trying to tap the delete key multiple times to clear the input field, but it happens when double tapping any button rapidly.

{
  "dependencies": {
    "@ionic/react": "^8.1.2",
    "@ionic/storage": "^4.0.0",
    "@vercel/functions": "^1.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-ionicons": "^4.2.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "vite": "^5.2.0"
  }
}

One addition: When I download this to my device as an app, the double tap to zoom behavior works correctly.

2

As an update, the repo/example are no longer relevant. I ended up fully removing Ionic from the application and using Tailwind. This resolved the problem with double tap zoom, which validates the assumption that it was something specific to the Ionic button causing the problem. I wish I could have figured out what it was to fix it, but I’ll keep an eye on this issue and try to come back to Ionic later if/when that’s fixed.

3

I just tested this on my own Ionic React app and I couldn’t reproduce the double-zoom behavior when double-tapping a button in the PWA version when accessed from an iPhone 13.

The meta tag in index.html in my app is:

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />

4

Yes, the PWA version is fine, but it is ignoring the meta tag for the browser.

5

Using Safari on iOS 17 to access the PWA, double tapping does not seem to cause zoom. What version are/were you using?