Support » Theme: Sydney » Image flicker on slider

  • Resolved babyninja

    (@babyninja)


    Hi, This problem seems to have just cropped up recently on my website http://www.babyworldandme.co.uk
    On the homepage the images seem to intermittently flicker in the bottom right corner on the transitions between the three images. Happens in chrome but not in IE. Also only happens on my 14″ laptop and not when page is reduced size or on mobile devices. I’m stumped! Any ideas how to fix this please?

Viewing 12 replies - 1 through 12 (of 12 total)
  • Update: When I go to the customise header area = header slider and tick “stop the text slider?” then the images no longer flicker. Obviously I do want the text slider but suggests the problem is the text slider and not the images. Still no idea how to fix!

    I have the same flickering issue in the bottom right-hand corner of the theme/screen. But in addition to the flicker, on the second screen rotation (Ready to begin your journey?), four icons appear mid-screen, but off-centre: a video camera, a still camera, Mode and Gallery.

    You can view the image here:

    http://brennigjones.com/blog/?attachment_id=11765

    @brennig: those icons are part of the image.

    My colleagues will try to figure out the flickering issue. I personally don’t see it though.
    I will get back to you as soon as we have something.

    Vlad

    Wow, superfast contact. Thank you for the helpful information.

    Hello @babyninja,

    I don’t see that flickering issue on my Chrome. Please see this screencast: https://cloudup.com/cFQE6VwJC_z. It looks fine here on my end. Due to the issue isn’t consistent, it is difficult for us to troubleshoot it. I am curious about what is exactly happening on your end. Could you please create a screencast using Licecap application?

    Regards,
    Kharis

    Hi Kharis, thanks so much for looking into this. You can view the screencast here:
    screencast

    It only happens in the bottom right corner (happens twice on the short clip). It’s like a quick rectangular white shape that flickers in as the text slider comes in. I’ve tried the website on other machines with chrome and can replicate the problem. Although as I say only chrome and not on IE or mobile devices.

    Hope you can figure it out! Thanks

    • This reply was modified 1 year, 2 months ago by  babyninja.
    • This reply was modified 1 year, 2 months ago by  babyninja.

    Hello there,

    Thank you for updating me. I thought the issue is about JS performance on a certain version of Chrome. What version of Chrome are you using?

    Regards,
    Kharis

    Latest version – 54.0.2840.87 m

    I was only able to reproduce the issue by emulating on Browserstack with Chrome on Mac. Though two colleagues with actual Macs don’t see it.

    Can you guy please try to disable the animation for the text by adding this in a custom CSS plugin:

    
    .text-slider {
      -webkit-animation-name: none;
      animation-name: none;
    }
    

    You can use the arrows to slide faster and see if the issue still shows up.

    Hi Vladff, that solved it 🙂
    Thanks so much for your time and reply (thanks Kharis as well).

    Yeah, I couldn’t emulate the problem with a Mac either,was driving me nuts!

    Okay, cool.

    One more thing please. Let’s try to recreate the text animation in a different way.
    – remove the code I gave you;
    – add this instead:

    
    .text-slider {
      position: relative;
      right: -99em;
    }
    @-webkit-keyframes fadeInRightBig {
      from {
        right: -99em;
      }
      to {
        right: 0;
      }
    }
    @keyframes fadeInRightBig {
      from {
        right: -99em;
      }
      to {
        right: 0;
      }
    }
    

    Seems to work fine for me, but as I’ve said I’m not checking on a physical device.

    Vlad.

    Hi Vlad, that worked perfectly no flicker issues.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Image flicker on slider’ is closed to new replies.