Фон / элемент становится черным при входе в полноэкранный режим с HTML5

Я использую следующий скрипт, чтобы сделать мое веб-приложение полноэкранным...

function enterFullscreen(){
    var element = document.getElementById('container');
    if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
    l('Fullscreen Mode entered','internal');
}

И вот, когда я нажимаю кнопку триггера через $('button.toggle-fullscreen').click(function(){ enterFullscreen(); }); На самом деле я вхожу в полноэкранный режим, только мой элемент становится черным. Просто черный, больше ничего.

Кто-нибудь знает, как это исправить?

К вашему сведению, я использую Chrome 27.

Источник

5 ответов

Решение

Цвет фона по умолчанию полноэкранного "визуального окружения" браузера - черный. Ваш контент на самом деле есть, но в настоящее время это черный текст на черном фоне, поэтому вы не можете его увидеть (попробуйте выделить или нажать Ctrl+A чтобы убедиться в этом).

Если вы хотите сделать фон другим цветом, вы должны указать правило CSS, чтобы установить background-color свойство, отличное от значения по умолчанию. Итак, в вашем случае:

#container:fullscreen {
    background-color: rgba(255,255,255,0);
}
#container:-webkit-full-screen {
    background-color: rgba(255,255,255,0);
}
#container:-moz-full-screen {
    background-color: rgba(255,255,255,0);
}

должен сделать свое дело. (Убедитесь, что вы используете соответствующую версию (и) поставщика - :-webkit-full-screen а также :-moz-full-screen - пока спецификация не завершится; см. MDN для получения дополнительной информации.)

На самом деле, может быть, просто

*:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
    background-color: rgba(255,255,255,0);
}

EDIT @DevilishDB: использовал rgba для прозрачной BG и добавил селектор *, чтобы предыдущая вещь работала

Источник

Ни один из других ответов не работает для меня (Chrome 70 или FF 63)

Добавление этого в файл CSS работает

::backdrop
{
    background-color: white;
}
Источник

Я не знаю точного ответа на ваш вопрос, но эта информация может помочь:

У меня была похожая проблема черного фона с enterFullscreen(document.body);, Цвет фона стал нормальным после того, как я изменил строку на enterFullscreen(document.documentElement);, CSS я использовал body{background-color: #D7D7D7; margin: 0px;},

Источник

Не знаю почему, но кажется, что фон элемента body не отображается в полноэкранном режиме или становится прозрачным...

Я исправил это, установив цвет фона для элемента html, и он работает просто отлично:

html {
    background-color: #ffffff;
    /* Or any color / image you want */
}
Источник

Я потратил часы, чтобы найти решение этой проблемы.

Я закончил этим:

  • Установка белого цвета на фон
  • И используя z-index, чтобы опустить его

Потом:

  • Исправление белого цвета содержимого html-страницы
  • И используя z-index, чтобы подтолкнуть его вверх (над фоном)

У меня работает в Firefox и Chrome

::backdrop {
    z-index:0;  
    background-color: white !important;
}

html, *:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
    background-color: white !important;
    z-index:1;
}
Источник

Основное решение мне не помогло:-(я нашел другое решение, но да, в css:

:-webkit-full-screen, :fullscreen, :-ms-fullscreen, :-moz-full-screen {
position: fixed;
width: 100%;
height: 100%;
top: 0; 
background: none;}

Я понимаю, что это для позиции моих элементов, но я не уверен. Надеюсь помочь кому-нибудь. Пока и спасибо.

Источник

Принятый ответ работает в большинстве браузеров, но в моих тестах не в IE11. Для меня это работает в текущих Chrome, Firefox, Edge, IE 11 и Safari на iOS:

CSS:

body {
    background-color: #ffffff;
}

JS:

function openFullscreen () {
    let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    let elem = isSafari ? document.documentElement : document.body;
    let openFn = elem.requestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen || elem.msRequestFullscreen;
    if (openFn) {
        openFn.call(elem);
    }
};

edit: добавлено исключение для iOS/Safari, которое не работает с использованием body элемент.

Источник
Другие вопросы по тегам