Stop blocking native scroll on the YES canvas's touch handlers
Deploy / deploy (push) Successful in 34s
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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user