Single/sub pixel misalignment of divs on ipad and iphone safari

Question

I\'ve got the following situation, and I need some help...

1. Two divs, same size, same location, one on top of the other
2. Everything works as expected on

Answer 1

The problem is not only with divs matching together, but also with image sprites.

I followed the advise in this thread of setting initial viewport scale to 1.0. The sub-pixel bug was gone, but then I tested my website on other devices, like Android, and realized a full size page is annoying, since users have to re-scale every time it's loaded. So I preferred to disable the scale and wait until Apple fixes it. Then one day I was thinking how to solve the problem with the margins of the page, and I came to this simple solution in CSS:

html {
  min-width: 1024px;
}

Devices capable of this resolution, such as iPad in horizontal position, will set the document scale to 1.0. In my case this is enough solution, since I can show the page is working just right, and the sub-pixel bug is in Safari/iOS, which will be solved in the future hopefully.