Reputation: 2988
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:
.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%;}
}
What am I doing wrong? :)
Upvotes: 2
Views: 1358
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
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