Search code examples
javascriptjquerycssfouc

Javascript and CSS FOUC prevention interfering print stylesheet

I'm using a simple technique to prevent FOUC on my page. I have a "feedback" sliding button on my page that's initially set with display:none in my stylesheet. Later, when JS is loaded and the sliding code is loaded, i apply .css('display', 'block') with jQuery. That works perfectly.

However, when someone prints the page, my sliding button and it's content are shown in the print version, even though i'm declaring display:none for the DIV inside the print.css. How can i fix this?

Solution

  • Maybe use:

    display: none !important;

    in your print style.