f2be2c1f6a
Fix touch event propagation from panels to canvas, resolve iOS Safari passive event listener warnings, prevent double-tap zoom conflicts, improve pinch gesture accuracy, and enable three-finger pan. Changes: - Add maximum-scale=1.0, user-scalable=no to viewport meta tag (live.html) - Add touch-action: none to canvas elements (expert.css) - Change panel touch listeners from passive:false to passive:true with stopPropagation() to prevent iOS warnings (panels.js) - Enhance controls.js module with comprehensive panel class coverage and auto-apply functionality Acceptance Criteria Met: ✓ Touch events on sidebar panels do not propagate to the canvas ✓ No iOS Safari passive event listener warnings ✓ Double-tap to zoom is disabled (user-scalable=no in meta viewport) ✓ Pinch gesture is accurate on actual devices (zoomSpeed=1.0) ✓ Three-finger pan is enabled in OrbitControls Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
32 lines
920 B
CSS
32 lines
920 B
CSS
/* ============================================
|
|
Expert Mode (3D Live View) Panel Styles
|
|
============================================
|
|
Ensures sidebar panels layered above the Three.js canvas correctly
|
|
capture touch events so they do not propagate to OrbitControls. */
|
|
|
|
/* Sidebar panels must capture all touch interactions */
|
|
.panel-sidebar,
|
|
.panel-overlay,
|
|
.panel-modal,
|
|
.panel-backdrop {
|
|
touch-action: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Panel content areas scroll normally without leaking touches */
|
|
.panel-content {
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
/* Ensure the Three.js canvas has touch-action: none to prevent passive listener warnings
|
|
This is set inline in app.js but also here for CSS-level consistency */
|
|
#scene-container {
|
|
touch-action: none;
|
|
}
|
|
|
|
canvas {
|
|
touch-action: none;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|