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

# 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

Automatic Mode

The plugin works automatically once installed. No additional JavaScript code is required.

// The plugin automatically enables the fix when your app starts
// No additional code needed!

Manual Control (Optional)

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

Plugin not working

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

Still seeing magnifier

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.