Has anyone found fix for iOS safari zooming in/out rounding error?

HTML & CSS
1

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?

2

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.)

3

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.

4

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.

5

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.

6

Very cool thank you Paul I will try that. I will also probably try every other webkit extension I can find.

7

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. :slight_smile:

#quote {
width:218px;
margin:auto;
text-align:left;
background:url(/images/midquotebg.jpg) repeat-y;
-webkit-background-size:100%;
}

8