Fullscreen looks wrong on android browser

[AB95]

Hi everyone~

I have been working on a scene which uses different camera in different device, FreeCamera will be attached to the scene if the scene is displayed on a standalone pc browser, as for mobile browser,

VRDeviceOrientationFreeCamera is attached when mobile browser is in landscape; DeviceOrientationCamera when portrait orientation.

The ideal results are as shown below:

(mobile landscape orientation)

(mobile portrait orientation)

above results are the ideal results, which are the results on chrome, opera and firefox mobile browser.

However, when I open the page using android default browser, about half of the page blank, in both landscape and portrait orientation, as shown below:

(landscape)

(portrait)

it looks like the canvas has been "shrinked" into half of the page, no distort of the scene, and is actually in fullscreen mode while not visually fullscreen.

Below are the code of how I make the scene full screen and switch between browser:

Code for fullscreen:

function goFullscreen(){
  var docElm = document.documentElement;
  if (docElm.requestFullscreen) {
  engine.switchFullscreen(true);
   docElm.requestFullscreen();
   }
   else if(docElm.msRequestFullscreen){
     engine.switchFullscreen(true);
     docElm.msRequestFullscreen();
   }
   else if (docElm.mozRequestFullScreen) {
   engine.switchFullscreen(true);
   docElm.mozRequestFullScreen();
   }
   else if (docElm.webkitRequestFullScreen) {
   engine.switchFullscreen(true);
   docElm.webkitRequestFullScreen();
   }

}

Code to switch between vr camera and device orientation camera when using mobile to display the page:

var is_mobile = function() {
      return (/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera);
};

function isLandscape(){
  return screen.width >screen.height;
}

window.addEventListener("resize", function() {

  if (!is_mobile()){
    return;
  }
    if (isLandscape()){
      scene.activeCamera = vrCamera;
      vrCamera.attachControl(canvas,false);
    }else{
      scene.activeCamera = devOrienCamera;
      devOrienCamera.attachControl(canvas,false);
    }

  engine.resize();
});

I am not sure if it is the default android browser's issue or there is something else I need to take note while making the scene fullscreen... If anyone had encounter the similar situation feel free to share :). and thank you for your time~

 

 

 

 

Edited November 22, 2016 by AB95
wrong tag

[aWeirdo]

Hi, do you have a name for the browser other than default android browser? 
My bad, it is actually just called "Android Browser".. +1 for ingenuity..  
anyways, still, Version number?

"newer" (proper) androids use a version of chrome as default, perhaps the old one simply doesn't fully support fullscreen, it's hard to tell without knowing more about the browser itself

[AB95]

16 hours ago, aWeirdo said:

Hi, do you have a name for the browser other than default android browser? 
My bad, it is actually just called "Android Browser".. +1 for ingenuity..  
anyways, still, Version number?

"newer" (proper) androids use a version of chrome as default, perhaps the old one simply doesn't fully support fullscreen, it's hard to tell without knowing more about the browser itself

Hello! Thank you for reviewing my question

My device android version is 5.0. Does "newer" android version mean 6.0 onward?

[AB95]

Just noticed I missed doing engine.resize() when it is not a mobile device:

window.addEventListener("resize", function() {

  if (!is_mobile()){
    engine.resize();
    return;
  }
    if (isLandscape()){
      scene.activeCamera = vrCamera;
      vrCamera.attachControl(canvas,false);
    }else{
      scene.activeCamera = devOrienCamera;
      devOrienCamera.attachControl(canvas,false);
    }

  engine.resize();
});

but this is not what cause the android browser fullscreen issue, this will only cause distortion of the scene on pc browser, adding the engine.resize within (!is_mobile) if condition will solve the distortion issue, just point out in case of any confusion.

[aWeirdo]

Hi @AB95 

it really just depends on the manufacturer, some new phones still use the default browser.

Looking deeper into it, it seems the official fullscreen API support for the android browser is unknown, 
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API 
scroll down to "Browser compatibility" and click mobile and you'll see question marks at android,

My best guess would be that the browser simply haven't been kept up-to-date by the developers of it, or perhaps they simply didn't care to spend time & money fully supporting it, since it's rather rare a mobile would need to go fullscreen in a browser
it could ofcourse also be something else, it can be hard to tell without console errors^^

 

Edit;

Actually, in the linked page above, try reading the "Presentation differences" section, it could be that the browser doesn't set 100% width & height while in fullscreen.

[AB95]

Hello @aWeirdo 

Thank you for the suggestion of reading the Presentation differences part, I have solved my problem!

The "Presentation differences" section points out some part that sounds similar with the behaviour of my fullscreen issue:

Quote

Gecko automatically adds CSS rules to the element to stretch it to fill the screen: "width: 100%; height: 100%". WebKit doesn't do this; instead, it centers the fullscreen element at the same size in a screen that's otherwise black.

something slightly different would be my canvas is not centered (looks like it is shifted 50% below the top of the screen) while remaining area black, the solution recommended by the fullscreen API website is as shown below:

#myvideo:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

#myvideo is known to refer to the id we set for the canvas element.

This solution doesn't work for me, BUT! this solution may work for <div> element but not <canvas> element (as we know babylon makes use of explicitly defined HTML canvas element to hold 3D graphics).

So instead, we could explicitly center the canvas and make it fullscreen using css:

#my-canvas:-webkit-full-screen {
  position: absolute;
   width: 100%;
   height: 100%;
   left:0;
   right:0;
   top:0;
   bottom:0;
   margin:auto;
}

and that solves my issue. 

[AB95]

also, since i don't need both the canvas and entire document to be fullscreen at the same time, below should be more or less the entire scope of the goFullscreen function:

function goFullscreen(){
engine.switchFullscreen(true);
}