Line artifacts in mobile Safari

Question

Safari renders black lines in between divs on my website at some scales. It is particularly bad when it breaks apart an image that is chopped in two different divs for a button or something. I can't put a BG in the parent of the two divs because they are transparent .pngs. Any solution or just deal with it?

capture of the problem, http://i.stack.imgur.com/pTLki.png

TravisO also has the same problem, and I changed how the page was laid out, originally it was a simple table with 5 rows, I removed the rows and just went with images and br, still happens. I've tried to remove all padding and margins via CSS but it was pretty obvious the problem isn't the browser rendering, but with the resampling the browser does to convert the page into a size that fits on the screen. You can see my broken page at:

http://www.apinkdoor.com/show/

Answer 1

TravisO, you should get rid of the img styling in your css! If you use only this:

<style type="text/css">
*
{
    margin: 0px;
    padding: 0px;
}

body
{
    background-color: #f00;
    text-align: center;
}
</style>

it should render properly on your iPhone!

Answer 2

This issue is a result of a rounding error produced in mobile safari when it rescales background images for display (it's a bug: http://openradar.appspot.com/8684766).

The solution is to increase the width of your right-button edge on its left side by 1 or 2px. Then adjust your CSS accordingly so the 1 or 2 pixels you added are not displayed by default.