WordPress AnythingSlider plugin: flash of unstyled content

[GrayD]

I am having trouble with AnythingSlider and the FOUC, I’ve read through lots of forums but with no joy, most say use:

overflow-y: auto;
overflow-x: hidden

But this doesn’t seem to work the wordpress plug in.

This is the slider with the issue:
http://classroommatters.com/wordpress/

Can anybody help please?

[Mottie]

Hi GrayD!

Check out the [AnythingSlider FAQ](https://github.com/CSS-Tricks/AnythingSlider/wiki/FAQ#wiki-fouc) page. There are two methods shown there, the first and best one, shows how to add the overflow properties. But if you are using the latest version of AnythingSlider, this should already be contained within the anythingslider.css file.

Update: Ahh, I see you’re using the WordPress plugin. It looks like you can’t really use an ID the anythingslider.css because it changes with every reload. Maybe try changing [line 12](http://classroommatters.com/wordpress/wp-content/plugins/anythingslider-for-wordpress/css/anythingslider.css?ver=3.4.1) from `.slider` to `#anythingslider ul` since AnythingSlider is wrapped in a div with an id of “anythingslider”.

[GrayD]

Hi, thanks, I tried that before bit with no joy, is there a way to stop the ID changing on reload?

[Mottie]

Sadly no… I think WordPress or maybe it’s the plugin that randomizing the ID.

And, when I just looked at the anythingslider.css file, I noticed that the definitions only had `#anythingslider` – it needs the `ul` after it too – make it `#anythingslider ul`

[GrayD]

Thanks for spotting that, but sadly still has no effect, do you have any other ideas that might help?

[GrayD]

I added !important and it more or less worked, there’s just a flash of a scroll bar, it’s not perfect but I might get away with it.

[Author]

Posts