CODEWITHSUNDEEP
htmlcss
Roly Poly
Roly Poly

Reputation: 559

CSS animation fails to load on Safari

My goal is to make a CSS animation load properly on Safari. Currently the animation works on Chrome and Brave but it doesn't work correctly on my iPhone's Safari browser. Here is a jsfiddle: https://jsfiddle.net/plutownium/3ne7dwvp/9/

If you open the page and click "run" in the top left corner, you will see the animation play as it's supposed to if you load it on Chrome. What I am looking for is for the animation to "slide in" from the left and fill up the background div. It does this properly on -- as far as I know -- all browsers except Safari.

I am using @-webkit-keyframes specifically for the animation... so it's not that I'm missing those...

I tried changing my webkit keyframes indicators from to and from to 0%, 100% as in this Stackoverflow answer:

@-webkit-keyframes hideBlack {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    100% {
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    }
}

but still the animation does not work. I just see a grey box.

To add more examples of what doesn't work, view the top 2 answers here. Quote, "In Safari when you use Keyframes you need to use the whole percentage" did not make the "reveal" and "hideBlack" animations work in my phone's safari browser.

I tried following this page's advice, " Safari does not read trough the shorthand method for describing the animation [...] It needs to be described more detailed with its separate properties listed" but it doesn't load on Safari either (just the grey box again): https://jsfiddle.net/plutownium/3ne7dwvp/15/

*note the second jsfiddle link is chronologically after the previous link

I have also added the following lines in my css classes since starting my venture:

-webkit-animation-name: hideBlack;
-webkit-animation-duration: 0.75s;

&

-webkit-animation-name: reveal;
-webkit-animation-duration: 0.75s;

but still the animation does not play. There's just a bunch of grey filling the divs where I expect to see yellow/white sliding in from the side w/ black text.

Again my most recent minimum reproducible example is available on jsfiddle through this link: https://jsfiddle.net/plutownium/3ne7dwvp/15

I am beginning to grow suspicious that I did not implement one of the solutions correctly. Let me know in the comments if I messed up making my fiddle...

Upvotes: 1

Views: 704

Answers (1)

user13229678
user13229678

Reputation:

You should read this table caniuse, This clip-path property does not support by all modern browser.
When you see something like this problem, You should check this property or value in caniuse.com.

CanIUse is an extremely useful tool for quickly visualizing which frontend technologies are compatible with which browsers. ... At a glance, you can see which major browser supports the technology in question, notes, resources, known issues, and more.

Upvotes: 1

Related Questions