CSS fullscreen box working in firefox but not in Chrome

Question

I'm working on a simple "Dead Pixel Finder" webpage. I have code that works in Firefox Quantum, but not in Chrome.

In the script section I have code that enables Fullscreen API when page is clicked. And it works fine in Firefox Quantum.

....

    <style type="text/css">
        div
        {
            height: 100vh;
            width: 100wh;
            background-color: red;
        }       
    </style>

</head>
<body>
    <div id="box" onclick="full_screen();"></div>
</body>

But in Chrome I get a black page, not the color I set for background color?

Shouldn't that be `100vw` for the width? I don't think "wh" means anything. — Pointy, Dec 04 '17 at 14:40
@MuhammetCanTONBUL not necessary div should work fine. '.' is for class and '#' is for id. For native html elements you don't need to mention the selection operator. — priyadarshi swain, Dec 04 '17 at 14:46

score 0 · Answer 1 · answered Dec 04 '17 at 14:48

I am not sure what kind of API you are using there but check this out:

https://jsfiddle.net/cwoz3qw1/1/

 div {
   height: 100vh;
   width: 100vw;
   background-color: red;
 }


let i = document.querySelector('#box');

i.addEventListener('click', () => {

  if (i.requestFullscreen) {
    i.requestFullscreen();
  } else if (i.webkitRequestFullscreen) {
    i.webkitRequestFullscreen();
  } else if (i.mozRequestFullScreen) {
    i.mozRequestFullScreen();
  } else if (i.msRequestFullscreen) {
    i.msRequestFullscreen();
  }
});

More info:

https://www.sitepoint.com/use-html5-full-screen-api/

CSS fullscreen box working in firefox but not in Chrome

1 Answers1