Fullscreen not working document.body, but works with render.domElement

vt5491 commented 8 years ago

I was having problems getting into proper fullscreen mode. I narrowed it down to this function in webvr-manager.js:

WebVRManager.prototype.requestFullscreen_ = function() {
  //vtvar canvas = document.body;  <- original line..comment out
  var canvas = this.renderer.domElement;  <-- line was previously commented out
  if (canvas.requestFullscreen) {
    canvas.requestFullscreen();
  } else if (canvas.mozRequestFullScreen) {
    canvas.mozRequestFullScreen();
  } else if (canvas.webkitRequestFullscreen) {
    canvas.webkitRequestFullscreen();
  }
};

I noticed the line: var canvas = this.renderer.domElement; was still in the code, just commented out -- like someone was afarid to completely delete it. Lo and behold, after I used this line instead of the original, my app properly went into fullscreen.

So there are obviously still some use cases where the "old" line worked. Or is there something I need to do in my app?

I am using the WebVR 1.0 branch of webvr-boilerplate

Here is the index.html for my code, if this helps:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body ng-app="webvr1TestApp">
    <!--[if lte IE 8]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="header">
      <div class="navbar navbar-default" role="navigation">
        <div class="container">
          <div class="navbar-header">

            <a class="navbar-brand" href="#/">webvr1Test</a>
          </div>

          <div class="collapse">

            <ul class="nav navbar-nav">
              <li class="active"><a href="#/">Home</a></li>
              <li><a ng-href="#/about">About</a></li>
              <li><a ng-href="#/">Contact</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
    <div ng-view=""></div>
    </div>

    <div class="footer">
      <div class="container">
        <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
      </div>
    </div>

      </div>
    </div>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>
       !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
       (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
       r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
       }(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script>

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <script src="bower_components/three.js/build/three.js"></script>
    <script src="bower_components/promise-polyfill/Promise.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
<!-- webvr-decorator lib add -->
<!--vt <script src="bower_components/threejs/build/three.min.js"></script> -->
<script src="bower_components/threejs/build/three.js"></script>
<script src="bower_components/webvr-polyfill/build/webvr-polyfill.js"></script>
<script src="bower_components/threejs/examples/js/controls/VRControls.js"></script>
<script src="bower_components/threejs/examples/js/effects/VREffect.js"></script>
<script src="bower_components/webvr-boilerplate/build/webvr-manager.js"></script>
<!-- webvr-decorator lib end -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/about.js"></script>
        <script src="scripts/services/main.js"></script>
        <script src="scripts/services/base.js"></script>
        <script src="scripts/services/utils.js"></script>
        <script src="scripts/directives/canvaskeys.js"></script>
        <!-- endbuild -->
</body>
</html>

Many Thanks.

cvan commented 8 years ago

On which browser and platform are you experiencing this?

vt5491 commented 8 years ago

The chromium open VR build from 03/07: chromium_webvr_v1_win_openvr.7z. chromium version Version 51.0.2671.0.

On windows 10.

borismus / webvr-boilerplate

Fullscreen not working document.body, but works with render.domElement #125