oversized div displaying in ipad wrong
I have a div that is both 4000 pixels wide and tall, and it does not want to display properly on the iPad. This is how it is supposed to look like, shown in Safari (please disregard the hideous gradient; it's in rough alpha!):

http://i.stack.imgur.com/UmAjD.png

See how it loads (somewhat) squarely in the window? Nice. This is a screenshot of the same site, from the offending iPad:

http://i.stack.imgur.com/nIIZo.png

Ouch. While the first ~1500 pixels are cut off, what's left shows up and demands to be seen. Pretty obnoxious! I'm kind of new to mobile we development, and would love to know just what the devil I'm missing out on here. This is the CSS for the div:

      .grad{
	overflow:auto;
	position:absolute;
	top:-1665px;
	left:-1448px;
	height:4000px;
	width:4000px;
	background-color: #1a82f7; 
  
	background-color: #2F2727;
	background-image: url(images/radial_bg.png);
	background-position: center center;
	background-repeat: no-repeat;
	background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
	background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));
	background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
	
	-moz-border-radius:2000px 2000px 2000px 2000px; 
	-webkit-border-radius:2000px 2000px 2000px 2000px; 
	border-radius:2000px 2000px 2000px 2000px;
   
Additionally, the body is set to overflow:auto. Any help will be greatly appreciated! Many thanks in advance!


  [1]: http://i.stack.imgur.com/UmAjD.png
  [2]: http://i.stack.imgur.com/nIIZo.png
oversized div displaying in ipad wrong
===

I have a div that is both 4000 pixels wide and tall, and it does not want to display properly on the iPad. This is how it is supposed to look like, shown in Safari (please disregard the hideous gradient; it's in rough alpha!):

http://i.stack.imgur.com/UmAjD.png

See how it loads (somewhat) squarely in the window? Nice. This is a screenshot of the same site, from the offending iPad:

http://i.stack.imgur.com/nIIZo.png

Ouch. While the first ~1500 pixels are cut off, what's left shows up and demands to be seen. Pretty obnoxious! I'm kind of new to mobile we development, and would love to know just what the devil I'm missing out on here. This is the CSS for the div:

      .grad{
	overflow:auto;
	position:absolute;
	top:-1665px;
	left:-1448px;
	height:4000px;
	width:4000px;
	background-color: #1a82f7; 
  
	background-color: #2F2727;
	background-image: url(images/radial_bg.png);
	background-position: center center;
	background-repeat: no-repeat;
	background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
	background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));
	background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
	
	-moz-border-radius:2000px 2000px 2000px 2000px; 
	-webkit-border-radius:2000px 2000px 2000px 2000px; 
	border-radius:2000px 2000px 2000px 2000px;
   
Additionally, the body is set to overflow:auto. Any help will be greatly appreciated! Many thanks in advance!


  [1]: http://i.stack.imgur.com/UmAjD.png
  [2]: http://i.stack.imgur.com/nIIZo.png