<!DOCTYPE html>
<html>
  <head>
    <style>
      ::backdrop {
          background: yellow;
      }
      body, html {
        height: 100%;
        margin: 0px;
      }

      body:-webkit-full-screen-ancestor > :not(:-webkit-full-screen-ancestor):not(:fullscreen) {
        display: none!important
      }

      #spacer {
        width: 200px;
        height: 3000px;
        background-color: red;
      }

      #fullscreenElement {
        width: 20px;
        height: 20px;
        background-color: blue;
        position: absolute;
        left: 10px;
        top: 500px;
      }
    </style>
    <script>
      // To test manually, you can enter fullscreen by clicking on the blue square while
      // the page has some scroll offset. Exiting fullscreen should reset to the previous
      // scroll position.
      var fullscreen = false;
      addEventListener('load', function() {
        document.getElementById('fullscreenElement').addEventListener('click', function() {
          if (fullscreen)
            document.webkitExitFullscreen();
          else
            this.webkitRequestFullscreen();

          fullscreen = !fullscreen;
        });
      });
    </script>
  </head>

  <body>
    <div id="spacer"></div>
    <div id="fullscreenElement"></div>
  </body>
</html>