CSS Animation - "Clip" not working correctly on Safari/iPad

[Shoxt3r]

Hi all,

I’m having problems with a CSS animation on iPad Safari.
It appears to be due to the “clip” I have applied but I can’t be sure.

What should be happening is the outer circle fills up like a progress bar, as is the case with all other browsers.

Below is a Codepen with my example code:
https://codepen.io/Shoxt3r/pen/MWwKwyL

Attached is a screenshot of the result I’m getting on iPad at the moment.

Many thanks in advance.

[PaulOB]

Try adding this at the end of the css:

.circle-wrap .circle .mask{border-radius:0;}

[Shoxt3r]

Thanks Paul, that fixed the issue! Do you know why this was causing such a problem?
I’m guessing it’s because the two halves were appearing split with the border-radius of the mask set to 50%?

Working Codepen below:
https://codepen.io/Shoxt3r/pen/qBdboRX

[PaulOB]

@Shoxt3r

Do you know why this was causing such a problem?

I think it’s just a bug with the animations. I’ve run into problems before with animations and border radius on safari and IOS so was the first place I looked.

Sometimes you just have to find a workaround.

[Shoxt3r]

Ah good to know - I had a feeling it something to do with the “clip” property or the mask element I was targeting. Will definitely bare that in mind for future animations!