Adding html doctype ruins fullscreen canvas

Alec Jacobson

March 11, 2011

weblog/

Recently I experienced a very minor but annoying problem. I made a fullscreen canvas like this one:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <style type="text/css">
    html,body
    {
      height: 100%;
      width: 100%;
      margin: 0;
      background-color: #F54;
    }
    canvas#full
    {
      height: 100%;
      width: 100%;
      margin: 0;
      background-color: #4F5;
    }
    </style>
    <title>Properly fullscreen canvas, but no doctype</title>
  </head>
  <body>
    <canvas id="full">
    </canvas>
  </body>
</html>

which you can see for yourself. Then all I did was add to the top:

<!DOCTYPE HTML>

and you can see on the right a scroll bar now appears and there are 3 pixels below my canvas showing the background. This is a minor but very annoying problem. I fixed this by adjusting the CSS style of the fullscreen canvas to:

    canvas#full
    {
      display: block;
      height: 100%;
      width: 100%;
      margin: 0;
      background-color: #4F5;
    }

The result validates and looks right.