div周围的iOS（Safari和Chrome）黑色边框

Question

I have this div with no border. On the iPhone/iPad browsers it appears with a black border around. The code:

.progress {
position: absolute;
left: 0px;
z-index: 9999;
background: #ffffff url(img/progress.gif) center 95px no-repeat;
height: 100%;
}

I already tried with:

border: 1px solid white;

But to no avail. Also transparent brings nothing.

Screenshot: http://liebdich.biz/img/Foto.PNG

Edit: Actually I am not sure what is happening. Since this div appears on other cases without border. Go to http://liebdich.biz/blanc to see it live. It is the Ajax "loading" animation div . Whenever you click on a link you can see it. However if you go to http://liebdich.biz/blanc/profile and click on an image you see the same div , but with a border...? Can it be, that this is in connection with the jQuery fadeOut of the images?

Thank you!!

Answer 1

This was happening to me and it had to do with the meta tag allowing zoom

Apparently iOS Safari has a problem with resizing things and creates that artifact

Applying a meta tag to disable zoom solved my problem (user-scalable = no)

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />