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.