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

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

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(); });, я действительно вхожу в полноэкранный режим, только мой элемент становится черным. Просто черный, ничего больше.

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

FYI Я использую Chrome 27.

Ответ 1

Цвет фона по умолчанию полноэкранной "визуальной среды" браузера является черным. Ваше содержание на самом деле есть, но на данный момент это черный текст на черном фоне, поэтому вы не можете его увидеть (попробуйте выделить или нажать 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);
}

ИЗМЕНИТЬ @DevilishDB: использовал rgba для прозрачного BG и добавил селектор *, чтобы предыдущая работа работала

Ответ 2

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

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

Ответ 3

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

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

html {
    background-color: #ffffff;
    /* Or any color / image you want */
}

Ответ 4

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

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

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