Grow your CSS skills. Land your dream job.

WordPress AnythingSlider plugin: flash of unstyled content

  • # October 3, 2012 at 1:23 am

    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?

    # October 5, 2012 at 8:58 am

    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”.

    # October 7, 2012 at 11:31 am

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

    # October 8, 2012 at 6:48 pm

    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`

    # October 9, 2012 at 12:36 pm

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

    # October 11, 2012 at 12:32 am

    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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".