Fix slider interference with scroll gestures on touch devices across all diagrams

[Copilot]

On touch devices, scrolling the page caused D3-created sliders in Minkowski diagrams to briefly trigger, shifting rendered values before snapping back to correct values.

Root Cause

D3-created sliders in multiple diagrams captured touch events during vertical scrolling, generating spurious input events.

Affected Components Fixed

Twins Paradox Tab (minkowski-twins.ts)

• Velocity slider

Spacetime Interval Tab (minkowski.ts)

• Position slider (animation control)

Simultaneity Diagram (simultaneity.ts)

• Velocity slider
• Position slider

Changes

Touch Event Filtering

• Track touch interaction state and initial position
• Analyze gesture direction before deciding handling
• Only call preventDefault() for horizontal gestures (slider interaction)
• Allow vertical gestures (scrolling) to pass through normally

.on("touchmove", function (event: TouchEvent) {
  const deltaX = Math.abs(touch.clientX - startX);
  const deltaY = Math.abs(touch.clientY - startY);
  
  if (deltaX > MIN_GESTURE_THRESHOLD || deltaY > MIN_GESTURE_THRESHOLD) {
    if (deltaY > deltaX) {
      // Vertical gesture - allow scroll
      isSliderActive = false;
      return;
    }
    // Horizontal gesture - use slider
    event.preventDefault();
  }
})

CSS Properties

• touch-action: pan-y on slider containers (allows vertical scrolling)
• touch-action: none on slider inputs (enables custom gesture handling)

Safety

• Added null checks for TouchEvent.touches edge cases
• Extract gesture threshold constant (10px minimum movement)

Testing

• ✅ All 411 tests pass
• ✅ Build succeeds without errors
• ✅ TypeScript compilation successful
• ✅ Security scan shows no vulnerabilities

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Twins paradox scrolling issue</issue_title>
<issue_description>In the Javascript calculator, on the twins paradox tab Minkowski diagram, when scrolling the page the velocity rendered seems to shift before quickly snapping back to the correct value. This happens on touch devices like iPad.

It seems to briefly switch to the default 0.8c</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Twins paradox scrolling issue #81

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[lookbusy1344]

@copilot if this is the correct diagnosis of the problem, why does it go back to the proper velocity setting after a moment?

[Copilot]

@copilot if this is the correct diagnosis of the problem, why does it go back to the proper velocity setting after a moment?

Great question! The "snap back" happens because of the feedback loop between the slider and the diagram controller.

What was happening:

1. During scroll, the slider generated a spurious input event (e.g., reading default 0.8c)
2. The display updated immediately, showing the wrong velocity
3. After 300ms debounce, the onVelocityChange callback fired, triggering a full recalculation
4. The controller's update() method then corrected the slider value back to the proper velocity (lines 1052-1056 in minkowski-twins.ts)

So the "snap back" was the controller resetting the slider to the correct value after the spurious input event had already updated the display. The fix prevents the spurious input events from firing during scrolling, eliminating both the initial shift and the snap back.

Fixed in commit ae3bdd1.

[lookbusy1344]

@copilot does this bug affect other tabs, like the spacetime interval tab. If so fix it

[Copilot]

@copilot does this bug affect other tabs, like the spacetime interval tab. If so fix it

Yes, the bug affected other tabs with D3-created sliders. Fixed all affected sliders:

✅ Spacetime Interval tab - Position slider (animation control)
✅ Simultaneity diagram - Velocity and position sliders

Applied the same touch event handling to all three diagrams. All sliders now properly distinguish between vertical scrolling and horizontal slider interaction.

Fixed in commit 9211b0b.