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);
|
updatePosition(e.clientX, e.clientY);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Scoped to the canvas itself, not `window` - the original
|
// Scoped to the canvas itself, not `window` (see below), and
|
||||||
// standalone page was the whole document, so preventDefault()ing
|
// no longer calling preventDefault(): the original standalone
|
||||||
// touchmove globally was harmless (nothing else to scroll to).
|
// page was the whole document, so blocking default touch
|
||||||
// Embedded as a hero above a longer page, that same global
|
// behavior was harmless (nothing else to scroll to). Embedded
|
||||||
// handler silently blocks scrolling everywhere, not just over
|
// as a hero above a longer page, .hero-yes covers the entire
|
||||||
// the canvas - this only intercepts touches that start there.
|
// 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) => {
|
this.lineCanvas.addEventListener('touchmove', (e) => {
|
||||||
e.preventDefault();
|
|
||||||
if (e.touches.length > 0) {
|
if (e.touches.length > 0) {
|
||||||
const touch = e.touches[0];
|
const touch = e.touches[0];
|
||||||
updatePosition(touch.clientX, touch.clientY);
|
updatePosition(touch.clientX, touch.clientY);
|
||||||
}
|
}
|
||||||
}, { passive: false });
|
}, { passive: true });
|
||||||
|
|
||||||
this.lineCanvas.addEventListener('touchstart', (e) => {
|
this.lineCanvas.addEventListener('touchstart', (e) => {
|
||||||
e.preventDefault();
|
|
||||||
if (e.touches.length > 0) {
|
if (e.touches.length > 0) {
|
||||||
const touch = e.touches[0];
|
const touch = e.touches[0];
|
||||||
updatePosition(touch.clientX, touch.clientY);
|
updatePosition(touch.clientX, touch.clientY);
|
||||||
}
|
}
|
||||||
}, { passive: false });
|
}, { passive: true });
|
||||||
|
|
||||||
this.mouseX = 0.5;
|
this.mouseX = 0.5;
|
||||||
this.mouseY = 0.5;
|
this.mouseY = 0.5;
|
||||||
|
|||||||
Reference in New Issue
Block a user