Capacitor Plugin iOS Double Tap Fix

A 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.

Problem

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.

Solution

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

Installation

``bash


Install from NPM

npm install capacitor-plugin-ios-doubletap-fix

Sync with iOS

npx cap sync ios

Build your iOS app

npx cap run ios
`

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 handlers

Compatibility

- ✅ 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 app

Development

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`

License

MIT License

Credits

Based on research from Stack Overflow community solutions and Apple's iOS 15+ text interaction APIs.