Image flicker on slider

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:

https://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 8 years, 4 months ago by babyninja.
• This reply was modified 8 years, 4 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.