Take the 2-minute tour ×

I'm trying to use <canvas> in iPhone Safari, and if I place the element in the body, there are unused pixels to the left and top of the element. I tried specifying margin:0;padding:0 with CSS to no avail.

What's going on here?

            $('#screen').attr("height", $(window).height() );
            $('#screen').attr("width", $(window).width() );

            //prevent scrolling
            $(document).bind('touchstart touchmove', function(e)
<canvas id = "screen">
share|improve this question
Where did you stick "margin:0;padding:0"? –  Warty May 27 '10 at 4:00
In code not shown. –  Stefan Kendall May 28 '10 at 14:16

2 Answers 2

up vote 1 down vote accepted

margin,padding, and border have no effect.

Use position:absolute; top:0;left:0

share|improve this answer
Unfortunately, position:absolute; top:0;left:0 shoved the canvas on top of all content for me. No fiddling (z-index, etc.) was able to remedy it. Added an answer below for what worked for me. –  hiwaylon Dec 11 '12 at 23:15

add <style>* {margin:0;padding:0;border:0;position:absolute;width:100%;height:100%}</style>

share|improve this answer

Your Answer


