Fullscreen Firefox - how to remove the white bar at the bottom of the page?

T

tsahk2017-03-13 14:03:22

JavaScript

tsahk, 2017-03-13 14:03:22

I want to make a button to go to full screen mode. In Chrome it works fine, in Firefox there is a white bar at the bottom. After some actions - disappears (for example, if you call the developer tools).
Strip screen:

I tried to repeat it on JSfiddle - it didn't work, there is no problem there, the window unfolds normally.
The problem persists locally.
The code:

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <meta charset="UTF-8" />
  <style type="text/css">
    html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#world {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(#e4e0ba, #f7d9aa);
}
#wrap {
  position: relative;
}
#fullscreen-button {
    display: block;
    margin: 50px auto;
    min-width: 100px;
    min-height: 60px;
    background: rgba(122, 122, 122, .6);
    border: 0;
    cursor: pointer;
    font-family: sans-serif, monospace;
    font-size: 13px;
    color: #fff;
}
  </style>
</head>
<body>
  <div id="world"></div>
  <div id="wrap">
    <button id="fullscreen-button">Go Fullscreen!</button>
  </div>
  <script type="text/javascript">
    document.getElementById('fullscreen-button').onclick = function() {
  if (!document.fullscreenElement &&   
        !document.mozFullScreenElement && !document.webkitFullscreenElement) { 
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      } else if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
      } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.cancelFullScreen) {
        document.cancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
    }
};
  </script>
</body>
</html>

I hope someone can explain what is causing this and how to fix it.
Thanks in advance.
Sources:
https://developer.mozilla.org/ru/docs/Web/API/Elem...
https://developer.mozilla.org/ru/docs/DOM/Using_fu...
___
UPD: If not difficult , unsubscribe, did you manage to repeat the problem at home?

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

D

Dmitry, 2017-03-13
@tsahk

Perhaps the problem is in the browser itself or the OS, try the same version of the browser but on a different machine.

M

Mr Crabbz, 2017-03-13
@Punkie

#world {
  position: absolute;
  width: 100%;
  /* Магия */
  height: 100vh; 
  /* ---  */
  overflow: hidden;
  background: linear-gradient(#e4e0ba, #f7d9aa);
}

A

Alexander, 2017-03-13
@lebonnet

try using the screenfull.js library, maybe it will fix the situation