[Elementor] Screen flicker with Elementor slideshow (CSS)

I have a slideshow on my home page that has flickering issues that I think stems from timing when the CSS loads. I looked at the following information…

https://docs.elementor.com/article/249-embedded-template-css-loading

I only tried number one because I wondered if it had to do anything with Hummingbird conflict? Not sure.

I am willing to try the other items but thought I would check with you folks first.

Bottom-line, I want to remove the flicker of images as things load. Please advise.

On a somewhat related note, I have set the slideshow to be hidden on the mobile and tablet views but it is still displaying. If you have a solution for that, it would be great!

  • Nithin Ramdas
    • Support Wizard

    Hi Clay Hess,

    Hope you are doing good today. :slight_smile:

    I only tried number one because I wondered if it had to do anything with Hummingbird conflict? Not sure.

    I gave a test by running the page unminified, and the results are same with flickering. If it was related to Hummingbird disabling Asset Optimization would have resolved the issue, but that doesn't seem to the case.

    Would recommend you to carry on with the other steps, and see how it goes, so that we could give a closer look, if needed.

    I have set the slideshow to be hidden on the mobile and tablet views but it is still displaying.

    I could notice the same behaviour, this was due to Asset Optimization as the file related to hide the section frontend.css was getting override when compressed, and combined. I tried couple of methods to correct that via enabling Advanced mode, but the sections are still visible.

    I'm checking this with the developer to see what could be done in such context, will keep you updated once I get an update regarding this asap.

    Regards,

    Nithin

  • Nithin Ramdas
    • Support Wizard

    Hi Clay Hess,

    Regarding the slider showing up in mobile, and tablets. Our developers gave a closer look, and it seems more related to the stylesheet being loaded in the footer, which was causing the behaviour when Asset Optimization was enabled.

    Our developers have corrected it under Hummingbird > Asset Optimization page, and now it seems to behave as mentioned. The slider is only visible in the desktop.

    Please check, and let us know if you have any further query.

    Regards,

    Nithin

  • Nithin Ramdas
    • Support Wizard

    Hi Clay Hess,

    It was working fine when tested last time. I checked the Asset Optimization settings, and I could notice the tweaks done for the related files weren’t no longer visible. Was Asset Optimization settings reset?

    I tried to tweak the settings further via the Asset Optimization, but I’m afraid, that doesn’t seem to help much, I’m checking this again with the developer to see what’s being missed, and will get back to you once we have given a closer look asap.

    Regards,

    Nithin

  • Calum Brash
    • Developer

    Hi Clay Hess,

    I’ve managed to confirm this is an issue with Hummingbirds CDN and compression when processing elementor-frontend-css. It’s causing an error when trying to handle two of your background image urls for .swiper-lazy-preloader:after {} and .swiper-lazy-preloader-white:after {}.

    For now I’ve turned off the CDN for https://fidkids.com/ and turned off compression for elementor-frontend-css which has resolved this issue.

    We’re investigating further as to why this is happening and I will post back here as soon as a fix has been released so you can continue using Hummingbirds CDN :slight_smile:

    Cheers,

    Calum