Hi Ashley,
Thanks for using NextGEN Gallery Optimizer!
I’ve just been testing your site, and I believe the flickering (and complete absence of gallery thumbnails and site content in Safari 5.0.6 for Mac) is caused by a stylesheet in your theme called “animate-custom.css”. When I remove it from your source, everything loads and works as intended. It contains a lot of custom styles for WebKit, which might explain why it’s not affecting Firefox.
I would suggest looking for the following line in your header.php file in your theme, and either comment it out, or remove it entirely…
<link href="http://www.moroccoholidayhome.co.uk/wp-content/themes/mhh/css/animate-custom.css" rel="stylesheet" media="screen">
Hope this helps!
Cheers,
Mark.
Thread Starter
Ashley
(@planetint)
How bizarre as I get all the content, the gallery images it simply adds an additional flicker when mousing over the image.
Don’t want to remove the animated css as the client loves it and any browser that doesn’t support it should simply ignore (so that’s a bit weird.).
Thanks for the response though. Guess I’ll have to look in to this a bit more ;(
Hi Ashley,
I’ve been digging a little deeper into your stylesheet for you, and I’ve found that by changing your “-webkit-animation-fill-mode” property to “none;”, it resolves both the disappearing content and the flicker. I’m not sure if this will affect your animation on newer versions of Safari, but might be worth a shot…
Also, I’ve been able to get your animation to work on Safari 5.0.6 by setting all opacity levels at 1, and by making sure more than two keyframes are defined for webkit actions…
The Animation’s Fill Mode.
Certain versions of Safari (5.0 and older) will only apply a value of “forwards” if there are exactly two keyframes defined. These browsers always seems to use the 2nd keyframe as the “forwards” state, which is not how other browsers do it; the correct behaviour uses the final keyframe. This is fixed in Safari 5.1.
http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/
Here’s the full code:
.animated{-webkit-animation-fill-mode:none;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s}
.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s}
@-webkit-keyframes fadeIn{0%{opacity:1}60%{opacity:.5}100%{opacity:1}}
@-moz-keyframes fadeIn{0%{opacity:1}100%{opacity:1}}
@-o-keyframes fadeIn{0%{opacity:1}100%{opacity:1}}
@keyframes fadeIn{0%{opacity:1}100%{opacity:1}}
.fadeIn{-webkit-animation-name:fadeIn;-moz-animation-name:fadeIn;-o-animation-name:fadeIn;animation-name:fadeIn}
@-webkit-keyframes fadeInLeft{0%{opacity:1;-webkit-transform:translateX(-20px)}60%{opacity:.6;-webkit-transform:translateX(0)}100%{opacity:1;-webkit-transform:translateX(0)}}
@-moz-keyframes fadeInLeft{0%{opacity:1;-moz-transform:translateX(-20px)}100%{opacity:1;-moz-transform:translateX(0)}}
@-o-keyframes fadeInLeft{0%{opacity:1;-o-transform:translateX(-20px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInLeft{100%{opacity:1;transform:translateX(-20px)}100%{opacity:1;transform:translateX(0)}}
.fadeInLeft{-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft}
@-webkit-keyframes bounceInDown{0%{opacity:1;-webkit-transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px)}80%{-webkit-transform:translateY(-10px)}100%{-webkit-transform:translateY(0)}}
@-moz-keyframes bounceInDown{0%{opacity:1;-moz-transform:translateY(-2000px)}60%{opacity:1;-moz-transform:translateY(30px)}80%{-moz-transform:translateY(-10px)}100%{-moz-transform:translateY(0)}}
@-o-keyframes bounceInDown{0%{opacity:1;-o-transform:translateY(-2000px)}60%{opacity:1;-o-transform:translateY(30px)}80%{-o-transform:translateY(-10px)}100%{-o-transform:translateY(0)}}
@keyframes bounceInDown{0%{opacity:1;transform:translateY(-2000px)}60%{opacity:1;transform:translateY(30px)}80%{transform:translateY(-10px)}100%{transform:translateY(0)}}
.bounceInDown{-webkit-animation-name:bounceInDown;-moz-animation-name:bounceInDown;-o-animation-name:bounceInDown;animation-name:bounceInDown}
@-webkit-keyframes bounceInLeft{0%{opacity:1;-webkit-transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px)}80%{-webkit-transform:translateX(-10px)}100%{-webkit-transform:translateX(0)}}
@-moz-keyframes bounceInLeft{0%{opacity:1;-moz-transform:translateX(-2000px)}60%{opacity:1;-moz-transform:translateX(30px)}80%{-moz-transform:translateX(-10px)}100%{-moz-transform:translateX(0)}}
@-o-keyframes bounceInLeft{0%{opacity:1;-o-transform:translateX(-2000px)}60%{opacity:1;-o-transform:translateX(30px)}80%{-o-transform:translateX(-10px)}100%{-o-transform:translateX(0)}}
@keyframes bounceInLeft{0%{opacity:1;transform:translateX(-2000px)}60%{opacity:1;transform:translateX(30px)}80%{transform:translateX(-10px)}100%{transform:translateX(0)}}
.bounceInLeft{-webkit-animation-name:bounceInLeft;-moz-animation-name:bounceInLeft;-o-animation-name:bounceInLeft;animation-name:bounceInLeft}
Hope this helps!
Cheers,
Mark.
