presentationcontrols has unexpected behavior on mobile device

[Andy-Leo]

Presentationcontrols can do well in PC device, but not work as expected when i toggle device to mobile. Is this a compatibility issues or what i missing?

https://drei.pmnd.rs/?path=/story/controls-presentationcontrols--presentation-control-story

[marklundin]

Also seeing this too. Did you manage to find a solution @Andy-Leo ?

[marklundin]

Just for future reference. It seems that setting the touch-action on the dom element that captures the drag will fix this

[bawolf]

If you're wondering how to do this correctly like I was, I just set a CSS property for all canvases in a global CSS file like below and it solved my problem.

canvas {
    touch-action: none;
}

[AmbiguousX]

Thanks bawolf. ChaptGPT could not solve the problem 4 me. HumanIntelligence ftw

[fully-john]

canvas {
    touch-action: none;
}

works for the issue in itself. But then scroll no longer works on page (when trying to scroll the page in the canvas). Anyone that has a solution that can fix both parts? That would be great :)

[whoiskevintho]

canvas {
    touch-action: none;
}

works for the issue in itself. But then scroll no longer works on page (when trying to scroll the page in the canvas). Anyone that has a solution that can fix both parts? That would be great :)

Yes! I'm also struggling to get PresentationControls working properly on a scrollable mobile page. For now my solution is make the canvas 80% of the screen width - so that the user can easily grab the edges to scroll down.