Full Screen on Android Chrome showing white band on Notch Area

The javascript code that I’m using, to fullscreen my web app,

var beginFullScreen = () => {
  const doc = window.document;
  const docEl = doc.documentElement;
  let requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
  if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
    requestFullScreen.call(docEl);
  }
}

Usually, I’m getting a black background on the top-notch area on every page I’ve tried to implement this through console, but on my webapp, I’m getting a white background.

I’ve tried adding

:fullscreen{
    background: black;
}

Although, this is no success at all. I’m using WebRTC in my project, I don’t think, this is an issue, but just adding incase.

Answer

All it needed was to add

{ navigationUI: "hide" }

as the params for the fullscreen request. And I was so dumbfounded by this answer.

Advertisement

Answer