Stop blocking native scroll on the YES canvas's touch handlers
Deploy / deploy (push) Successful in 34s

The real cause of the scroll jump, confirmed by "doesn't jump before
yes loads": preventDefault() on touchstart/touchmove was inherited
from the original standalone page (where it was harmless - nothing
else on the page to scroll to). Embedded as a hero, .hero-canvas
covers the entire first screen, so any touch-scroll gesture starting
there fought against blocked native scroll the whole time this
component was mounted. The position tracking these handlers do (for
the cosmetic line-cluster wiggle) never needed default prevented -
just switched to passive listeners so the browser scrolls natively.
This commit is contained in:
Bendik Aagaard Lynghaug
2026-08-06 16:36:05 +02:00
parent e630fde200
commit f8b3f47598
+14 -10
View File
@@ -106,27 +106,31 @@ export class RasterizedYES {
updatePosition(e.clientX, e.clientY);
});
// Scoped to the canvas itself, not `window` - the original
// standalone page was the whole document, so preventDefault()ing
// touchmove globally was harmless (nothing else to scroll to).
// Embedded as a hero above a longer page, that same global
// handler silently blocks scrolling everywhere, not just over
// the canvas - this only intercepts touches that start there.
// Scoped to the canvas itself, not `window` (see below), and
// no longer calling preventDefault(): the original standalone
// page was the whole document, so blocking default touch
// behavior was harmless (nothing else to scroll to). Embedded
// as a hero above a longer page, .hero-yes covers the entire
// first screen - preventDefault() here was fighting the
// browser's own native scroll for any touch gesture starting
// in that region, which is what actually caused scrolling to
// jump/stutter (only once this component had mounted and
// attached these listeners - a plain page scroll never needed
// default prevented in the first place, just the position for
// the cosmetic line-cluster tracking below).
this.lineCanvas.addEventListener('touchmove', (e) => {
e.preventDefault();
if (e.touches.length > 0) {
const touch = e.touches[0];
updatePosition(touch.clientX, touch.clientY);
}
}, { passive: false });
}, { passive: true });
this.lineCanvas.addEventListener('touchstart', (e) => {
e.preventDefault();
if (e.touches.length > 0) {
const touch = e.touches[0];
updatePosition(touch.clientX, touch.clientY);
}
}, { passive: false });
}, { passive: true });
this.mouseX = 0.5;
this.mouseY = 0.5;