Full Screen event on Touch not working on Chrome

Question

In my mobile app I want to toggle full screen when user is swiping up.
So when touchend event is triggered I'm calling document.documentElement.webkitRequestFullScreen();
The problem is that it doesn't works for me in mobile Chrome 56+.

Here is example. https://jsfiddle.net/ibmw/tnncaxj0/6/

The interest part is: this issue appearing only when you make touchmove between touchstart and touchend.

In console I've got an error:

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture. document.documentElement.webkitRequestFullScreen();

Does anyone know how to struggle it?

Answer 1

You have to call preventDefault() on touchmove, and pass new option to addEventListener() . It's works for me:

addEventListener('touchmove', onTouchMove, {passive: false});

function onTouchMove(e) {
  e.preventDefault
}