After setting the height and width of a canvas to 100%, I noticed that instead of fitting the screen perfectly, it slightly exceeded the boundaries, causing a scroll bar to appear allowing me to scroll just a few pixels up, down, left, or right, even after setting top and left to 0em.
Is there a specific reason for this behavior? And are there any solutions to this issue other than adjusting the height and width to 98% instead of 100%?
This was observed using Chrome 36.0.1985.143
HTML:
...
<canvas id="canvas"></canvas>
...
CSS:
...
canvas
{
border: 2px solid red;
background-color: yellow;
position: absolute;
z-index: -1;
height: 100%;
width: 100%;
top: 0em;
left: 0em;
}
...