CSS3 Webkit Full Screen Detection Not Working

css, html, webkit

Solution

I think this has something to do with you pressing F11 to get fullscreen. You need to trigger the fullscreen via `webkitRequestFullscreen` and the other cross-browser versions of this. Also, I think that the CSS doesn't apply to the body. Try to use a wrapper and apply it to that element:

document.getElementById('gofullscreen').addEventListener('click', function() {
  var elem = document.getElementsByTagName("body")[0];
  elem.webkitRequestFullscreen();
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  }
});

html,
body {
  width: 100%;
  height: 100%;
}

#wrapper {
  height: 100%;
  width: 100%;
}

 :-webkit-full-screen #wrapper {
  color: red;
  background: red;
}

<div id="wrapper">
  <a href="#" id="gofullscreen">fullscreen</a>
</div>

See Fiddle and Fullscreen version (Use the Fiddle link to see the code and the Fullscreen version to see it working, Fiddle doesn't allow fullscreen I think).

But the `:-webkit-full-screen` and the like are experimental, so don't rely on it. https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

Problem

I am having a really tuff time getting CSS3 to detect full screen. Right now, I have: ``` :-webkit-full-screen body { color: red; background: red; } ``` When hitting F11 in my browser, nothing turns red. For testing, I am trying to turn everything red but not having success. I am using Chromium 31.0.1650.57. Am I using `:-webkit-full-screen` incorrectly?

Original source