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

jquery google-chrome jquery-animate
jmm picture jmm · Jan 30, 2011 · Viewed 12.8k times · Source

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

PetersenDidIt picture PetersenDidIt · Jan 30, 2011

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

Related questions

Why does jQuery .css('left') and .position().left return different values?

The values I'm getting for $(el).css('left') and $(el).position().left are different? If I go $(el).css('left', '100px'), then $(el).css('left') it returns 110px instead of 100px (yes, it is always 10% more) and if I …

Read More
Why are my jQuery animations choppy in webkit-based browsers?

I'm working with a very simple animation: sliding a line of images to the left: $('#button').click( function() { $('div#gallery').animate({scrollLeft:'+=800px'}, 1000); } ); (It's supposed to be an image gallery; I hide the overflow to show only one …

Read More
jQuery `.is(":visible")` not working in Chrome

if ($("#makespan").is(":visible") == true) { var make = $("#make").val(); } else { var make = $("#othermake").val(); } Make:<span id=makespan><select id=make></select><span id=othermakebutton class=txtbutton>Other?</span></…

Read More