Problem:
- Rapid tapping on +0.001/-0.001 buttons triggered page zoom on iOS Safari
- Previous solutions (viewport meta, touch-action: manipulation) were ineffective
Solution implemented:
1. Enhanced global touch event handling in index.html:
- Added comprehensive gesture event prevention (gesturestart/change/end)
- Improved touchend debouncing with stopPropagation
- Added specific CSS rules for button elements with touch-action: none
2. Modified button interaction in modify-score.vue:
- Replaced @click events with @touchstart/@touchend handlers
- Added preventDefault and stopPropagation on touch events
- Implemented 100ms debounce to prevent rapid successive touches
- Added pointer-events: none to child elements to ensure touch targets
- Changed touch-action from 'manipulation' to 'none' for complete control
Technical details:
- touch-action: none completely disables browser touch gestures
- Event handlers use { passive: false } to allow preventDefault
- Debounce mechanism prevents accidental double-triggers
- Child elements have pointer-events: none to ensure parent handles all touches
Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
