Touch Devices normalizeScroll Bug

[Seb Creativos]

Hey guys!

 

I don't really know if this an already reported bug or there are any workarounds in the forum, didn't find anything related to this specifically, it's quite big unfortunately 😞

 

I've tested this in iOS (Safari) and Android (Brave), and it happens in both reproducing the same exact steps.

 

To reproduce the bug, you will need to enter the pen with an actual touch device, and scroll in the body first. Then, if you scroll in one of the red boxed containers, the release of the touch gesture will activate the buttons event, which is a simple alert in this case.

 

This project needs normalizeScroll unfortunately  (it introduces a lot of stutter and in 120Hz devices it feels really bad, but it's a compromise we are willing to accept).

 

The bug was introduced when I had to enable allowNestedScroll, without it, the bug doesn't occur at all.

 

ScrollTrigger.normalizeScroll({
  allowNestedScroll: true,
});

 

If you have any workarounds, I'd greatly appreciate it, thanks in advance!

See the Pen XWoPqLM by Blvcked (@Blvcked) on CodePen

[GreenSock]

Sorry about the tardy response, @Seb Creativos! We've had our hands full with the new site launch. 

 

This was addressed here: 

 

The next release should have that fixed, but in the meantime you could do something like: 

let dragged;
document.addEventListener("touchstart", () => dragged = false, {capture: true});
document.addEventListener("touchmove", () => dragged = true, {capture: true});
gsap.utils.toArray("button, a").forEach(el => {
	el.addEventListener("click", e => dragged && e.preventDefault(), {capture: true});
});

Does that resolve things?