Jquery hide() and show() runs too slow in google chrome

Question

I have a web application that doesn't run correctly in chrome. Works perfectly in Firefox. I have a page with a large numbered of list items, 316 to be exact. Each list item contains a large amount of HTML. My problem is when I want to hide or show these list items.

I have a test page on jsFiddle to show the problem I'm having. I stripped down the HTML page to one unordered list to hold all 316 list items. I have two buttons that simply call jQuery hide or show when clicked. Again this runs fast in Firefox, Opera, even IE, pretty well in Safari but in Google Chrome it can take over 30 seconds which brings up the dialog window asking if you want to kill the page because a script is running to long.

Here is the link to jsFiddle

http://jsfiddle.net/oumichaelm/UZCZc/3/embedded/result/

thanks for any input. jmm

Answer 1

Looks like this has nothing to do with jQuery and just is a problem with Chrome hiding an parent element that has a HUGE number of children elements.

This just uses basic javascript to hide the element on document ready:

document.getElementById('sortable-lines').style.display="none";

And it still takes forever after the document is ready.

http://jsfiddle.net/petersendidit/UZCZc/10/embedded/result/

Opened a Chrome bug for this: http://code.google.com/p/chromium/issues/detail?id=71305