Capacitor plugin to disable iOS magnifier on double tap for Ionic Framework apps
npm install capacitor-plugin-ios-doubletap-fixA production-ready Capacitor plugin to disable the iOS magnifier that appears on double-tap gestures in Ionic Framework applications running on iOS 15+ and newer versions.
On newer iOS versions (iOS 15+), double-tapping anywhere in a Capacitor/Ionic webview triggers a blue magnifier loupe, which interferes with the user experience in mobile applications.
This plugin automatically disables the iOS text selection magnifier using multiple proven techniques:
- iOS 15+ Text Interaction API: Disables isTextInteractionEnabled for WKWebView
- Gesture Removal: Removes system double-tap gesture recognizers from webview subviews
- Zoom Prevention: Disables all zoom capabilities in the scroll view
- CSS/JS Injection: Comprehensive prevention through stylesheet and event handling
``bashInstall from NPM
npm install capacitor-plugin-ios-doubletap-fix
Usage
$3
The plugin works automatically once installed. No additional JavaScript code is required.`typescript
// The plugin automatically enables the fix when your app starts
// No additional code needed!
`$3
`typescript
import { DoubleTapFix } from 'capacitor-plugin-ios-doubletap-fix';// Enable the fix manually
await DoubleTapFix.enable();
// Disable the fix
await DoubleTapFix.disable();
// Check if enabled
const { enabled } = await DoubleTapFix.isEnabled();
`How It Works
1. Text Interaction Disable (iOS 15+): Uses Apple's official
isTextInteractionEnabled = false API
2. Gesture Recognizer Removal: Removes double-tap gesture recognizers from all webview subviews
3. Scroll View Configuration: Disables zoom, pinch, and multi-touch capabilities
4. CSS/JavaScript Prevention: Injects comprehensive styles and event handlersCompatibility
- ✅ iOS 15.0+ (Primary target with
isTextInteractionEnabled)
- ✅ iOS 13.0-14.x (Fallback with gesture removal and CSS/JS)
- ✅ Capacitor 7.0+
- ✅ Ionic Framework (all versions with Capacitor)
- ✅ Swift 5.1+Production Ready
This plugin is designed for production use with:
- No debug alerts or console logs
- Minimal performance impact
- Error-safe implementation
- Comprehensive coverage of magnifier triggers
File Structure
`
capacitor-plugin-ios-doubletap-fix/
├── package.json
├── tsconfig.json
├── rollup.config.js
├── CapacitorPluginIosDoubletapFix.podspec
├── README.md
├── src/
│ ├── index.ts
│ ├── definitions.ts
│ └── web.ts
└── ios/
└── Sources/
└── DoubleTapFixPlugin/
├── DoubleTapFixPlugin.swift
└── DoubleTapFixPlugin.m
`Troubleshooting
$3
1. Ensure iOS platform is added: npx cap add ios
2. Force sync: npx cap sync ios --force
3. Clean build: npx cap clean ios && npx cap sync ios$3
1. Test on real iOS device (simulator behavior differs)
2. Ensure iOS 15+ for full effectiveness
3. Check for conflicting CSS or JavaScript in your appDevelopment
To modify the plugin:
1. Update Swift files in
ios/Sources/DoubleTapFixPlugin/
2. Update TypeScript definitions in src/
3. Test with npx cap sync ios && npx cap run ios`MIT License
Based on research from Stack Overflow community solutions and Apple's iOS 15+ text interaction APIs.