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/
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.
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.
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!
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.
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%;
}
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.