First image jumping glitch

  • Resolved lojisasu

    (@dkf1908)


    6 years, 10 months ago

    LOVE Metaslider. I think it’s the best, as I have tried three different sliders at this point. One small issue is that my first slider image quickly jumps to the right (with a white space to the left) sometimes during refresh, or when going from another page on the site back to home. For the past week, I’ve gone through all the posts and found everything that pertains to this problem and have tried all the suggestions and none of them have worked so far. I’ve tried all the suggested css, settings, code, as well as all the usual suggestions for when WordPress things get buggy, as well as suggestions from other sites dealing with similar issues. Just wondering if there’s any updated information that might help. I gave up and tried Smart Slider 3 and did NOT like it as much as Metaslider, and the Elementor Slider is having a lot of sizing issues on different screens. Hope I can get this little glitch figured out because Metaslider is one of the best. Thank you!

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Kevin Batdorf

    (@kbat82)

    6 years, 10 months ago

    Hi @dkf1908

    Thanks for the kind words. It looks to be a simple style issue. The styles for MetaSlider are loading a bit late. Can you add this style to your main theme styles?

    .metaslider .flexslider ul.slides {
  margin: 0 !important;
}

    Alternatively, you might want to use a plugin such as Autoptimize to bundle up all your styles so they are served at once. https://ww.wp.xz.cn/plugins/autoptimize/

    Thread Starter lojisasu

    (@dkf1908)

    6 years, 10 months ago

    Oh wow – talk about speedy reply! I know I have rather large images and a lot of info on my homepage, so I’m sure I have a hand in all this! Been trying to whittle things down a bit for quicker load times. I’ll give these suggestions a try and let you know. Again – love Metaslider. It’s the only slider that I tried that behaves properly on mobile, and behaves properly when resizing ANY browser. And love the ease of use. THANK YOU! I’ll be in touch to let you know.

    Thread Starter lojisasu

    (@dkf1908)

    6 years, 10 months ago

    Hi again, I’ve done a few tests and tried Autoptimize. The installation guide recommended playing around with the settings if certain things were no longer behaving properly (some weren’t). I managed to get the slider to not jump, but then there was a dark brownish screen (in the slider picture space) plus a flash, all of which were really quick, but still noticeable. However, with these settings the homepage didn’t load properly. There are a ton of options though for getting everything to agree and play nicely together, which I’m going to go through and try to figure out. Oh, the first thing I did was add the CSS (above post) to the main theme CSS files. There were 4 different CSS main theme files and I tried all of them but they didn’t seem to have any effect. But I’ll going to keep working with these settings and hopefully I’ll get there. Interesting the image jumping barely happens in Safari and Firefox, but happens almost every single time with Chrome. Thank you so much for you help!

    Thread Starter lojisasu

    (@dkf1908)

    6 years, 10 months ago

    Just wanted to add – I don’t think it is a problem specific to Metaslider. I built a very simple slider from scratch/code, and it too, has the image jump/glitch in Chrome, also tested an Elementor slider and that also had the same image/glitch in Chrome. I’ll post again when I figure it out!

    Kevin Batdorf

    (@kbat82)

    6 years, 10 months ago

    Hi @dkf1908

    I see you have Autoptimize up now though and the margin issue is fixed, right? It looks fine to me now.

    The issue here is quite simple actually. Your theme has some styling on all

      elements by default (a 20px left margin), which MetaSlider overrides with its own stylesheet. There’s not a jump per say, but a delay from when the MetaSlider stylesheet loads to override that 20px margin. Browsers load everything with their own methods so this is why you see different results.

      Autoptimize combines all of your CSS files into one, so they load in one file.

    Thread Starter lojisasu

    (@dkf1908)

    6 years, 10 months ago

    You beat me to it – I was just about to reply again that I did another round with Autoptimize and this time was getting results. Still playing around with a few of the settings as they cause a few things to shift here and there. BUT it cured the loading time. And now you’ve identified the real issue – the theme margin. I should have remembered that from a year ago when the same thing happened to the Events Calendar. Anyway, I can’t thank you enough for all the help you’ve given me! Going to send the 5-star review now! THANK YOU! Metaslider is THE BEST!

    Kevin Batdorf

    (@kbat82)

    6 years, 10 months ago

    Great to hear! I’ll mark this as resolved then. If you have any more issues feel free to comment though, or open a new issue if that makes more sense. Take care (and thanks for the kind words!)

    Thread Starter lojisasu

    (@dkf1908)

    6 years, 10 months ago

    Again, can’t thank you enough!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘First image jumping glitch’ is closed to new replies.