CODEWITHSUNDEEP
windowscsssafaricss-animations
Philip
Philip

Reputation: 2988

css @keyframes animation not working in Safari for Windows

I made a carousel script that can either fade, slide or do both as a transition. This can be set by changing the class name of the parent container (#moduleCarousel_12).

[Fiddle: http://jsfiddle.net/6jx8ufwg/11/ ]

In Chrome this works fine.

In Safari (for Win) however:

  1. the fade only works if the parent also has "slide left" in the class name. Which is strange, since it only adds a second animation (left-positioning).
    .moduleCarousel.fade > div.active {
    z-index: 3;
    opacity: 1;
    -webkit-animation-name: fade;
    animation-name: fade;
}
.moduleCarousel.slide.left.fade > div.active {
    -webkit-animation-name: slide-left, fade;
    animation-name: slide-left, fade;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes fade {
    0% {opacity: 0; -moz-opacity: 0;}
    100% {opacity: 1; -moz-opacity: 1;}
}
/* Standard syntax */
@keyframes fade {
    0% {opacity: 0; -moz-opacity: 0;}
    100% {opacity: 1; -moz-opacity: 1;}
}

@-webkit-keyframes slide-left {
    0% {left: 100%;}
    100% {left: 0%;}
}
@keyframes slide-left {
    0% {left: 100%;}
    100% {left: 0%;}
}
    2. the slide transition doesn't work at all

What am I doing wrong? :)

Upvotes: 2

Views: 1358

Answers (2)

Philip
Philip

Reputation: 2988

So this is a bug in Safari (for Windows), for which there is no workaround apparently.

EDIT: According to CSS-tricks.com and w3schools.com the way I defined the animations is correct. (Unless I'm missing something?) And it works in all browsers, except in Safari for Windows.

And since nobody knows why it doesn't work and, as Easwee and Gho have said, there is no longer support from Apple for this version of the browser, the logical conclusion is: it's a bug and at this moment there is no fix. (And there probably never will be.)

But if I'm wrong or if I made a mistake in my script, please let me know.

Upvotes: 2

Gho
Gho

Reputation: 568

Safari on windows isn't a "real" browser, It's emulated to kind of, work on it. There are a lot of bugs concerning it, and a lot of web designers have issues with it, and also Apple withdrew their support for safari on windows in 2012. The good part is that there's a higher chance of winning the lottery than finding a windows-safari-user.

Upvotes: 7

Related Questions