I’m using firefox on android, and remote debugging it on linux via adb.
I’m making a webapp to be used on mobile, and I’d like it to be fullscreen. My solution is to enter fullscreen when the user taps the screen, but my problem is that requestFullscreen is unreliable when called from a touchstart event. In this simplified example I use toggle so we can see it’s continuing effect.
<!DOCTYPE html>
<html lang="en">
<body>
<script>
function toggleFullscreen(event) {
event.preventDefault();
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
document.documentElement.requestFullscreen();
}
}
touchCatcherElement.addEventListener('touchstart', toggleFullscreen, false);
</script>
</body>
</html>
This will fail at lease once, but once it works it seems to keep working reliably. I get the following error:
Request for fullscreen was denied because Element.requestFullscreen() was not called from inside a short running user-generated event handler.
A solutions I’ve tried is using the click event, which is 100% reliable
<!DOCTYPE html>
<html lang="en">
<body>
<div id="a"></div>
<script>
function toggleFullscreen(event) {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
document.documentElement.requestFullscreen();
}
}
function dummy(event) {
event.preventDefault();
}
window.addEventListener('touchstart', dummy, { passive: false });
window.addEventListener('click', toggleFullscreen, false);
</script>
</body>
</html>
The problem with this is I want to use preventDefault and that seems to stop the other handler from running, and I can’t be sure which order they’ll be executed in.
Does anyone know why touchstart doesn’t create reliable transient activation?
Or do you have any recommendations on other ways I could do this fullscreen functionality?