Border Radius: Something Wrong on iPad Mini

[martcol]

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

[apart]

Hmm it’s hard without codepen but you can try few things.

Did you set display:block on img ?

Did you use -webkit-border-radius and border-radius for circle ?

Check in Safari on desktop and see how does it work there.

[paulob]

Hi,

It does the same on my ipad also and seems to be a bug.

The ipad doesn’t round the thick borders on the image properly so apply the border to a floated parent instead and round that. Apply border-radius to** both the image and the parent** and it should work ok.

I just tested the method above on a single image and parent and it now works for me on the ipad.

[martcol]

Well,

Thanks to both of you for looking but so far not much luck.

It works on my iPad 2 and my iPhone 4.

It’s OK on Safari

[edit] no luck with display:block

My vendor prefixies are OK

I tried a container with a float + border-radius (at the moment it’s still on the first image)

Interestingly, on the iPad Mini I can see that the circular image (hand logo) in the header is OK.

Man, I wish I could get paid for code-staring – I’m the Grand Master of code-staring!

thanks again

[edit] Here’s the evidence that the top image is behaving well: http://postimg.org/image/xuf6w4bdh/

[martcol]

Sorted!

Apply all the border 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.

Martin

[Author]

Posts