Problem with Border Radius 50% in iPad Mini

HTML & CSS
1

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

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.



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

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

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

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

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

Hi,

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

e.g.


.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

Many thanks Paul O’B

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

Regards

Martin