Three.js Full Screen Issue

Question

I\'ve read through the Three.js API, read through the questions here on StackOverflow, I\'ve debugged the code using firebug and chrome\'s debugger, I\'ve stripped out everythin

Answer 1

I. Viewport Size Accuracy

I recommend using viewportSize.js by Tyson Matanich, since 'window.innerWidth' and 'window.innerHeight' are not always accurate.

Download : https://github.com/tysonmatanich/viewportSize

Demo : http://tysonmatanich.github.com/viewportSize/

Here's a detailed explanation from the author :

"Most people rely on window.innerWidth, document.documentElement.clientWidth, or $(window).width() which do not always accurately report the viewport width used in CSS media queries. For example, WebKit browsers change the size of their CSS viewport when scroll bars are visible, while most other browsers do not. Since window.innerWidth remains constant regardless of the scroll bar state, it is not a good option for use with Chrome or Safari. Additionally, Internet Explorer 6, 7, and 8 do not support window.innerWidth. On the other hand, document.documentElement.clientWidth changes based on the scroll bar state and therefore is not a good option for Internet Explorer, Firefox, or Opera."

Example :

var viewportWidth  = viewportSize.getWidth(),
    viewportHeight = viewportSize.getHeight(),
    viewportAspect = viewportWidth / viewportHeight;

camera = new THREE.PerspectiveCamera( 75, viewportAspect, 1, 10000 );

II. Elusive Elements

Look out for any elements created programmatically (via 'createElement'). They are easy to miss.

Use Chrome's inspector, or Firebug to see if there are any other elements that you might have missed. Often I see something that I had totally forgotten about, buried deep in last week's code and wonder how the heck I had missed it before.

III. Hard Reset

Lastly, to be thorough, you can try a hard reset. Eric Meyer's classic reset is generally considered to be the most thorough (http://meyerweb.com/eric/tools/css/reset/index.html), but I personally prefer the 'Condensed Meyer Reset' (which surfaced on the web sometime last year, author unknown) :

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, form, fieldset, input, textarea, p, blockquote, th, td { 
    padding: 0;
    margin: 0;
    }
fieldset, img { 
    border: 0;
    }
table {
    border-collapse: collapse;
    border-spacing: 0;
    }
ol, ul {
    list-style: none;
    }
address, caption, cite, code, dfn, em, strong, th, var {
    font-weight: normal;
    font-style: normal;
    }
caption, th {
    text-align: left;
    }
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size: 100%;
    }
q:before, q:after {
    content: '';
    }
abbr, acronym { 
    border: 0;
    }

Answer 2

This fixed problem for me. it always going to keep canvas at full screen.

canvas {
    width: 100vw;
    height: 100vh;
    display: block;
  }

Answer 3

Simply set display: block; on canvas element in your CSS

The <canvas> element is according to the mozilla developers network officially a block-level element. Something in between a inline element and a block element. They write:

Browsers typically display the block-level element with a newline both before and after the element.

But rendering of the element can vary across browsers, so to be sure you get the correct behavior it is best to explicitly set display: inline; or display: block; in your CSS.

So just set its display value in your CSS file to block, to solve the issue.

canvas {
    display: block; /* fix necessary to remove space at bottom of canvas */
}

Answer 4

In css this should also do the trick:

canvas {
    vertical-align: top;
}

Naturally needs also the padding, margin fixes from above