SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2010
    Location
    West Kent, UK
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with Border Radius 50% in iPad Mini

    Hello,

    This is my development site martcol.co.uk/karban. Itís a bit ragged here and there but it is under development.

    I have a panel of images that are rounded (border-radius: 50%) and a hover transition and everything there seems to go OK. I had the chance to view it on someoneís iPad Mini and got quite a shock! Hopefully, this shows a screenshot: http://postimg.org/image/5full37i1/

    Any ideas?

    Many thanks

    Martin

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The ipad doesn't seem round images very well so you will need to remove the border from the image and put the border on the parent element and then round both of them with border-radius.

    e.g.
    Code:
    div.splashitem img{
    border:none;
    border-radius:50%;
    }
    div.splashitem > a{
    border:1.15em solid red;/* change to suit */
    border-radius:50%;
    float:left;
    }
    The above code is additional not a replacement.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,322
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    It woks fine on iPad and iPad mini for me, so it might be an issue with an older version of iOS. It would be interesting to know what OS version was being used.

    EDIT: didn't refresh the page before posting, so didn't see Paul's answer.

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2010
    Location
    West Kent, UK
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sorted!

    Thank you so much!

    Jiggled the HTML about a little, applied all the border css shizzle to the containing element and border radius to the img.

    Thank you, thank you, thank you....

    You have no idea how good that feels (or perhaps you do).

    Martin

    PS - Yes, it was my partner's iPad Mini and she doesn't like to update the iOS no matter what I say. My own iPad is fine and was working all OK. One anomaly for me was that the header logo image worked fine!

    Thanks again.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Yes its an old webkit bug and you always had to apply the border-radius to the parent as well as the image and any borders need to go on the parent not the image.

    My ipad (ios6) shows the bug but the ipad emulator with the newer version doesn't have the bug anymore.

  6. #6
    SitePoint Zealot
    Join Date
    Apr 2010
    Location
    West Kent, UK
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a bit of a follow on from the original question. So I think I got it sorted on the home page but then, had a think on the news/blog page which uses featured images or post thumbs. That was a bit more tricky but I have ended up with this.

    .attachment-thumb-150.wp-post-image { /* to add round border to image */
    border-radius: 50% 50% 50% 50%;
    }

    .entry-thumbnail.small-4.column > a {
    background-color: #F8EB2C;
    border: 0.4em solid #F8EB2C;
    border-radius: 50%;
    display: inline-block;
    float: left;
    margin: 0 auto;
    width: 75%;
    }

    And this is in an @media query to get the border a different thickness for larger screens

    .entry-thumbnail.small-4.column > a {
    border-width: 0.6em;
    }

    The toughest part is getting the width correct and if I increase that, it goes a bit pear shaped when reducing the browser width.

    This is the page: martcol.co.uk/karban/news

    Thanks

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you want to size the image based on the parent then you have to left the image fill the parent.

    e.g.
    Code:
    .attachment-thumb-150.wp-post-image{
    width:100%;
    height:auto;
    }
    You can now set any width for the parent and it won't go pear shaped.

    Note that inlne-block and float are mutually exclusive and float wins out and inline-block is redundant so remove it.

    I would also use px for borders because browsers round ems differently and you will find you get a different thickness between browsers and actually disappearing in some browsers if they round to less than 1px.

  8. #8
    SitePoint Zealot
    Join Date
    Apr 2010
    Location
    West Kent, UK
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks Paul O'B

    I think yet another CSS Penny has dropped and I am grateful for your help.

    Regards

    Martin


Tags for this Thread

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
  •