SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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-clipadding-box fixes the bleed in border-radius in safari so may be worth a try. (Or perhaps in conjunction with a transparent border.)

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,353
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi Eric,

    The -webkit-background-size seems to make it scale a lot better.

    Code:
    #quote {
        width:218px;
        margin:auto;
        text-align:left;
        background:url(images/midquotebg.jpg) repeat-y;
        -webkit-background-size:100% 100%;
    }
    #qcap {
        height:15px;
        background:url(images/topquotebg.jpg) no-repeat;
        -webkit-background-size:100% 100%;
    }
    #qbot {
        height:20px;
        background: #06c url(images/botquotebg.jpg) no-repeat;
        -webkit-background-size:100% 100%;
        margin-top:-1px;
    }
    It's not perfect but much better in my tests.

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Very cool thank you Paul I will try that. I will also probably try every other webkit extension I can find.

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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%;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •