Update to v. 3.17.2 broke Nivo Slider

Hi,

I’ll check on it locally, but can you share a URL to the site? I’ll be able to tell right away if I can see it.

Nivo wasn’t changed at all, but our build process was so there could have been some optimization issue.

Hey!

I cannot provide a page, unfortunately, but if you need any additional information about the slider setup, just let me know. Meanwhile, I don’t think it is a z-index issue, but rather related to the overflow property.

Kind regards,
Bernd

Hi,

I can’t really help without seeing the site unless someone else reports it (and I can see it on their page). If you’d prefer to message me the URL privately you can send it to me on the official WordPress Slack channel (kbatdorf).

It’s a local development environment.

Is there anything I can check in the source code?

You can try right-clicking the element and inspecting the CSS to see where the styling is coming from. Maybe a negative margin or something. You can take some screenshots of that and share them here if you’re unsure what it all means.

That might involve a lot of back and forth though.

Could you put it on a development server?

Hi,

I’m going to mark this as resolved since the title is quite strong, no one else has reported this, and haven’t heard back.

Feel free to comment or open the issue back up if you can provide any more information. I’m happy to help.

How is an issue resolved, because no one else reported it and you haven’t heard back over the weekend?

Hi,

I closed it because the title is inaccurate. There’s a slight styling difference that’s specific to your theme, but nothing to indicate the plugin is broken (or even close)

Such a title is actually pretty serious to users that are evaluating whether to use our plugin.

Hope you understand. And like I said, if you can provide more details I’m happy to help with the debugging.

Hi,

Any updates on this issue? I usually close things after a week of no activity since stale posts don’t help anyone. Feel free to re-open if you have any further information and I’ll be happy to help debug the issue.

I could not figure out what causes the problem yet. Since the DOM tree is constantly changing, while the image carousel is running, it is hard to debug and inspect the CSS properties.

I compared both, the old implementation with correct slider and the new version with broken slider, but could not find any differences in the CSS attributes.

Is there any public code repository for the MetaSlider plug-in, so I can check the latest commits and see, whether anything was changed that might have caused this issue? As stated before, I did not change any code of my page and the slider used to work fine, until I updated the MetaSlider plug-in.

Hi,

If the issue is just a CSS difference then I can give you some CSS to update it to look how you’d like. It should take me less than a minute but I’d have to see the site.

If you’re trying to debug, I recommend you turn off autoplay under Advanced Settings.

Thanks, disabling autoplay made debugging significantly easier.

I could now identify what changed with the last update. CSS code of Nivo 3.18.0 contains a new loading animation that did not exist before. It is defined like this:

.theme-default .nivoSlider {
  background: #fff url(loading.gif) no-repeat 50% 50%;
}

Setting the background color to #fff here causes the issue, because it creates those white margins on each side of the slider image.

It should be something like this

.theme-default .nivoSlider {
  background: transparent url(loading.gif) no-repeat 50% 50%;
}

or the background definition should be omitted altogether.

Is that something you would fix within MetaSlider or is this a Nivo issue that needs to be fixed in a different project you rely on? Should I fix this issue locally within my theme, because it is specific to my side or does it make sense, if you fix it in your plug-in?

• This reply was modified 4 years, 2 months ago by actronab.

Hi,

Our CI must have been pruning that original style rule for some reason during our previous build process.

You can see our fork here that hasn’t been changed in 8 years:

https://github.com/MetaSlider/Nivo-Slider-jQuery/blob/master/themes/default/default.css

I think maybe it will be better without the loading animation so I might remove that for the next release.

You can remove it or change the bg color by adding your own CSS rule. Try:

.metaslider .theme-default .nivoSlider {
  background-color: transparent !important;
}

If you don’t want the loader:

.metaslider .theme-default .nivoSlider {
  background: transparent !important;
}

You can add that in your theme CSS anywhere, not in the Nivo css file.

Yah, I’ve fixed that for myself already. But if you will address that issue in MetaSlider, I don’t have to clutter my child theme with that fix.