search

bdougherty / BigScreen

A simple library for using the JavaScript Full Screen API.
https://brad.is/coding/BigScreen/
MIT License
710 stars 77 forks source link

Iframe > Set Fullscreen Background Color #8

Closed baden03 closed 10 years ago

baden03 commented 10 years ago

Having some trouble setting changing an iframe's background color to when in fullscreen mode. I understand that the default background color of the browsers visual environment is black when in fullscreen mode, but it seems it IS possible to override this with css.

http://stackoverflow.com/questions/16163089/background-element-goes-black-when-entering-fullscreen-with-html5

I have been trying to kung-fu this for the last day. Can someone please point me in the right direction?

bdougherty commented 10 years ago

What you're looking for is the ::backdrop pseudo-element, but IE 11 is the only browser that has it implemented so far. The easiest way to work around it now is to make sure that the element you're putting in full screen is 100% height and width when in full screen.

Turns out the demo page is now suffering from this issue too (when you click on the title it puts the <body> into full screen). Here's the CSS that fixes it there (which will be live shortly):

body:-webkit-full-screen {
    width: 100%;
}

body:-ms-fullscreen::-ms-backdrop {
    background-color: #fff;
}

body {
    background-color: #fff;
}

http://fullscreen.spec.whatwg.org/#::backdrop-pseudo-element