Android Chrome hides address bar after exiting fullscreen with javascript after rotating screen (bug?)

user_13604346 0
Viewed 464

I am using this javascript to make a website go fullscreen and exit fullscreen:

function ToggleFullscreen() {
  elem = document.documentElement;
  if (!document.fullscreenElement && !document.mozFullScreenElement &&
    !document.webkitFullscreenElement && !document.msFullscreenElement) {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }      
  }  
}

The problem is if the user has rotated their phone from landscape to portait at all during the pageview when you exit fullscreen the address bar doesn't reappear. This seems to be a bug as it works perfectly if they have not rotated the device prior. To get it back the user can ussually scroll up on page. However the content on the site I am currently making requires that scrolling is disabled so the user can't do that. So to them it just seems like the site has messed up and lost their address bar.

Can anybody think of a way to get the address bar back? I tried using "scrollTop = 0" and that didn't help. I even tried "scrollTop = 20" then after a delay "scrollTop = 0" and still no good. One thing that does bring it back is using "alert('message');". As you can imagine I don't want to make a message pop up every time somebody exits fullscreen though just incase they are in this state. Are there any other javascript functions that could potentially bring the address bar back just like an alert does? Or anything I could try to avoid this problem in the first place?

google-chrome fullscreen javascript
1 Answers

The only solution I found is to exit full screen mode after a delay after screen rotation:

screen.orientation.addEventListener('change', () => {
  if (screen.orientation.type.startsWith('landscape')) {
    document.documentElement.requestFullscreen();
  }
  else if (document.fullscreen) {
    setTimeout(() => document.exitFullscreen(), 500);
  }
});
user_6321990
Related