Implemented multiple layers of protection to prevent iOS Safari from zooming when users quickly tap the score adjustment buttons:
1. Enhanced touch event handling in modify-score.vue:
- Changed from touchend to touchstart for immediate response
- Added .stop.prevent modifiers to all touch events (touchstart, touchmove, touchend, touchcancel)
- Added noop() handlers to absorb unwanted events
- Replaced time-based debouncing with isProcessing flag using requestAnimationFrame
- Ensured all child elements have pointer-events: none
2. Comprehensive index.html protection:
- Added iOS-specific meta tags (apple-mobile-web-app-capable, format-detection)
- Enhanced CSS with touch-action: pan-y for scrolling while preventing zoom
- Implemented 7-layer JavaScript protection:
* Layer 1: Intercept rapid touchstart events with counter
* Layer 2: Block touchend events within 300ms
* Layer 3: Completely disable dblclick events
* Layer 4: Prevent gesture events (gesturestart/change/end)
* Layer 5: Use Pointer Events API for additional blocking
* Layer 6: Filter rapid click events
* Layer 7: Add capture-phase listeners to buttons
- All event listeners use { passive: false, capture: true } for maximum control
This multi-layered approach addresses the root cause: iOS Safari triggers zoom at the browser level before JavaScript can normally intercept it. By using capture phase and preventing events at multiple stages, we ensure the zoom behavior is blocked.
Generated with Claude Code
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
56c1320e40