Hi,
I have a round corner div. It’s your standard three part image. Top, middle with repeat-y, and bottom. On my iPhone (and iPad I’m sure) with every different zoom level comes a different rounding error with those background images. The rounding error is left to right. It’s not even a full pixel - more like a half. The only thing that I found that lessons the behavior is to float the outer div. But it’s only lessoned - not remedied. All three images are the same width so it “should” not happen. Googling I see that this is a common annoyance without any obvious fix. Has anyone found any fix for this yet?
Hi Eric,
I think this is the same bug that I saw last year with background images and I tried many things but to no avail. I guess its because the iphone uses sub pixels and when its zoomed things don’t scale exactly.
It would be interesting to see if anyone has a fix.
If you have a demo I’ll have another look and see if any of the background clip properties may have an effect. background-clip:padding-box fixes the bleed in border-radius in safari so may be worth a try. (Or perhaps in conjunction with a transparent border.)
Hi Paul - thanks! Here is the Test Page
The rounding error can be seen on the right hand side of the box, going left to right, between the top, middle, and bottom images. I tried all the usual stuff like position relative, overflow hidden, floating everything, no widths but widths controlled by margins, etc. Nothing stopped it.
I’ve posted that bug about a year ago and still haven’t found a solution.
To make things worse, Mozilla is also affected by similar bug. In your example add style=“background-color: red; -moz-transform: scale(1.15, 1.05);” to #quote and you’ll see it.
Hi Eric,
The -webkit-background-size seems to make it scale a lot better.
#quote {
width:218px;
margin:auto;
text-align:left;
background:url(images/midquotebg.jpg) repeat-y;
[B] -webkit-background-size:100% 100%;[/B]
}
#qcap {
height:15px;
background:url(images/topquotebg.jpg) no-repeat;
[B] -webkit-background-size:100% 100%;[/B]
}
#qbot {
height:20px;
background: #06c url(images/botquotebg.jpg) no-repeat;
[B] -webkit-background-size:100% 100%;[/B]
margin-top:-1px;
}
It’s not perfect but much better in my tests.
Very cool thank you Paul I will try that. I will also probably try every other webkit extension I can find.
Cool! It works perfect for me. Not one single rounding error. Doing some tests it looks like I only need the following on the middle image to fix it. So it seems it was only the repeating middle image that is having the rounding error. And one 100% seems to work fine. Thanks again Paul. 
#quote {
width:218px;
margin:auto;
text-align:left;
background:url(/images/midquotebg.jpg) repeat-y;
-webkit-background-size:100%;
}