I remember that at some point Opera ( Mostlikely it was Safari instead. ) had a problem that if you used .hide() on element, it would flash briefly before it would actually hide the element.

Now if you dont want to ignore those who for some reason dont have js on in their browser you cant really use CSS to set display: none; in that element to hide it and then use js to for example fade it in.

I recently noticed that this didnt happen anymore in Opera. So, i'd like to know if this still does happen in some browsers incase ive missed that.. And asuming that this would happen. What way would be the safest way to do it? ( of course ignoring the css method in this case. )

js .hide()

js .addClass('hide') css .hide { display: none; }

Or something else?

Edit:

js element.style.display = "none"

js $(element).css({display:"none"})

Edit2: This issue might have been in Safari actually. I also got thinking that newer jquery versions might have fixed the issue.. As i think there was a few bug reports about this problem on jquery website but i couldnt find those bug reports ..Or it could still be that newer browser version fixed it.. Not sure.

Edit3:

So, I did indeed find a lot more about this when I started searching for this bug in Safari rather than Opera. Though i cant say for sure that it never happened in opera as well...

It would seem like this problem does not exist anymore and that it is safe to use .hide() but what I learned was that this $(element).css({display:"none"}) did fix the problem when the problem was still out there.

I remember that at some point Opera ( Mostlikely it was Safari instead. ) had a problem that if you used .hide() on element, it would flash briefly before it would actually hide the element.

Now if you dont want to ignore those who for some reason dont have js on in their browser you cant really use CSS to set display: none; in that element to hide it and then use js to for example fade it in.

I recently noticed that this didnt happen anymore in Opera. So, i'd like to know if this still does happen in some browsers incase ive missed that.. And asuming that this would happen. What way would be the safest way to do it? ( of course ignoring the css method in this case. )

js .hide()

js .addClass('hide') css .hide { display: none; }

Or something else?

Edit:

js element.style.display = "none"

js $(element).css({display:"none"})

Edit2: This issue might have been in Safari actually. I also got thinking that newer jquery versions might have fixed the issue.. As i think there was a few bug reports about this problem on jquery website but i couldnt find those bug reports ..Or it could still be that newer browser version fixed it.. Not sure.

Edit3:

So, I did indeed find a lot more about this when I started searching for this bug in Safari rather than Opera. Though i cant say for sure that it never happened in opera as well...

It would seem like this problem does not exist anymore and that it is safe to use .hide() but what I learned was that this $(element).css({display:"none"}) did fix the problem when the problem was still out there.

• javascript
• jquery
• hide
• element

• 1 element.style.display = "none" or $(element).css({display:"none"}) are options too. – Joseph Marikle Commented Aug 21, 2011 at 21:43
• This article may be useful to you as well for deciding which is faster, but other than that I actually have no idea – Joseph Marikle Commented Aug 21, 2011 at 21:46
• read this SO question: stackoverflow./questions/5700865/… – Baz1nga Commented Aug 21, 2011 at 21:51
• Do you want to take it out of the flow when hiding it or simply make it invisible? I prefer visibility: hidden during loading because the element remains within the content flow and nothing else moves around. – Sparky Commented Aug 21, 2011 at 23:10
• Doesn't really make a difference @Sparky672 I mean.. that doesnt really affect the flashing or the load time.. I believe so. Either way, if its display: none you can always craft it to look like visibility: hidden if its so important. – Joonas Commented Aug 22, 2011 at 6:37

3 Answers 3

You should always rely on using jQuery hide() method to hide any element because it takes care of all the browsers. I haven't seen any issues in Opera though.

Even to show any element you should always rely on using show() method again for the same reason.

E.g. To show a tr element if we say tr.css("display", "block") it will not work in Firefox because it is a table row and it needs to be specified as .css("display", "table-row"). But if you use tr.show() you dont have to worry about any browser.

You could use noscript to provide an alternative element that is always displayed, whilst the JS element starts off hidden.

Or you could use start out with a class with no CSS rules and then get a script to alter the CSS class rule to make sure the element starts off hidden.

<html>
    <head>
        <style type="text/css">
            p.start-hidden-if-js-enabled {              
            }
        </style>
        <script type="text/javascript">
            document.styleSheets[0].cssRules[0].style.display = "none";
        </script>
    </head>
    <body>
        <p class="start-hidden-if-js-enabled">
            This text will be hidden if javascript is enabled.
        </p>
    </body>
</html>

Simply add a display:none in a stylesheet or put an inline style="display:none" on the element.