A Way to Correct Background Scaling in Ipad's Safari

A way to correct background scaling in iPad's Safari?

You should definitely create a separate stylesheet for the iPad.
You can use the following to do so:

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

On this link, you will find information about the orientation of your website on the iPad and how to deal with it.

My advice would be, to create a separate stylesheet (css file) for the iPad version of your site, no matter what you do, you should just create it and add a link tag like the one shown above.

If you have a background of a picture that is 2000x1500px for the iPad version, you can reduce it to fit the iPad, if that's the only thing you've got a problem with. I'd say you should reduce the size of the image to 1024px and declare it in the separate stylesheet for the iPad, and you will see the end result.

Let me know how it goes.

BTW you should read this article as well: http://www.inspiredm.com/2010/02/09/ipad-design/

CSS background images resizing incorrectly on iPad and iPhone.

I had the same issue, I used SCROLL instead of FIXED.

background-attachment:scroll;

(Really) Long Background Image Does Not Render on iPad Safari

Mobile Safari has limits to what size background images it will display before subsampling, you may be getting hit by this problem because of the size of your background:

The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM.
That is, ensure that width * height ≤ 3 * 1024 * 1024 for devices with less than 256 MB RAM. Note that the decoded size is far larger than the encoded size of an image.

see: Know iOS Resource Limits

iPad iPhone scale background images

This worked for on iPad:

-webkit-background-size: length_x length_y;

iPhone Web Development Image Scaling

Found the answer. The iphone "optimises" jpg's, compressing them to minimise the file size but destroying the quality of the image. All the reading I did suggested there was no way to switch this "feature" off.

The solution is simple, switch to pngs.

Scaling problem with -webkit-transform with mobile safari on iPad

I managed to solve the problem myself.

The solution is simple: just make sure the element is scaled to its original size to begin with:

-webkit-transform: scale(1);

There is one trick to it, though. If you, like I below, add a class to an element selected by #id, the #id has higher priority than the class and it will not show unless you tell the browser that it is important

-webkit-transform: scale(2) !important;

An alternative way to solve this is to not select the element by #id but by class (.block) or by element (div). Anything with lower priority than an id.

Solution follows:

<style type="text/css">

#block {
    position:absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 400px;
    -webkit-transition: -webkit-transform 3s ease-out;
    background-color: blue;
    -webkit-transform: scale(1);
  }

.zoom {
  -webkit-transform: scale(2) !important;
}
</style>
</head>

<body>
  <div id="block" onclick="className='zoom';">The Block</div>
</body>
</html>

A Way to Correct Background Scaling in Ipad's Safari