WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery Optimizer
[resolved] image flicker onmouseover Safari Mac (4 posts)

  1. Ashley
    Member
    Posted 1 year ago #

    Hi,

    The screen flickers and judders when mousing over the image on Safari (v5.1.7) on Mac.
    Specifically when mousing over the part of the image where the arrow instantiates to move forwards or backwards through the gallery images.

    NextGen Version 1.9.10
    NextGen Gallery Optimizer Version 1.1.2

    Using NGGO Fancybox

    Site link: http://www.moroccoholidayhome.co.uk/gallery/

    Help anyone please

    http://wordpress.org/extend/plugins/nextgen-gallery-optimizer/

  2. Mark Jeldi
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  3. Ashley
    Member
    Posted 1 year ago #

    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 ;(

  4. Mark Jeldi
    Member
    Plugin Author

    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.