jQuery’s hide() and show() slow in Chrome

Whilst working on a project where I’m filtering elements on the client using JavaScript I came across a very interesting issue with Chrome.

I filter elements by running jQuery’s hide() or show() on them depending on what the user entered and there’s around 750 elements that need this filtering. I noticed that this was quite slow in Chrome as it took around 2-3 seconds for the page to become responsive whilst filtering. I tested the page in Internet Explorer 9 to confirm that the code I had written was to blame, but the filtering was instant. What the hell Chrome?

I then asked a friend who uses Firefox to test it out and it also filtered instantly. I did a bit of research on the subject and came across a few people with the same issue as well as a bug report for Chromium.

One of the answers on Stack Overflow had a work around that seemed to work fine for Chrome. Instead of using the hide() and show() methods I used the following (with overflow: hidden;) :

Filtering was now instant again, but I remembered whilst searching for an answer I heard that negative top margins don’t work too well on older browsers. Well I fired up IETester to give it a test in some of the older versions of Internet Explorer and they were right. The elements still showing should collapse downwards but in Internet Explorer 8 and below they don’t collapse properly, but instead gaps are left where the hidden elements once were.

To fix this I ended up detecting if the user was using Chrome using my own version of the jQuery browser function which you can find below:

And then I used the following to do the rest:

I haven’t tested to see whether this works in earlier versions of Chrome but I can’t see it being much of an issue as Chrome automatically updates with each stable release.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.