@tsahk

Fullscreen Firefox — как убрать белую полосу внизу страницы?

Хочу сделать кнопку перехода в полноэкранный режим. В Chrome работает нормально, в Firefox остается белая полоса внизу. После некоторых действий - пропадает (например, если вызвать инструменты разработчика).

Скрин полосы:
6cdff9c48e7e45f1b58699b186a47e32.jpg

Попробовал повторить на JSfiddle - не получилось, там проблемы нет, окно разворачивается нормально.
Локально проблема остается.

Код:
<!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>


Надеюсь, кто-то сможет объяснить с чем это связано и как это исправить.
Заранее спасибо.

Источники:
https://developer.mozilla.org/ru/docs/Web/API/Elem...
https://developer.mozilla.org/ru/docs/DOM/Using_fu...

___
UPD: Если не трудно, отпишитесь, удалось ли повторить проблему у себя?
  • Вопрос задан
  • 2436 просмотров
Пригласить эксперта
Ответы на вопрос 2
Punkie
@Punkie
#world {
  position: absolute;
  width: 100%;
  /* Магия */
  height: 100vh; 
  /* ---  */
  overflow: hidden;
  background: linear-gradient(#e4e0ba, #f7d9aa);
}
Ответ написан
попробуйте использовать библиотеку screenfull.js может быть исправит ситуацию
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы