obj.hide() hangs webkit based browsers in some circumstances

obj.hide() hangs webkit based browsers in some circumstances

Hi all,<div>
</div><div>while working on a project, I have a following situation. There is a page that has about 1000 images on it. Divs which hold images have few classes that I use as filter for showing/hiding only images that belong to specific category.</div>
<div>
</div><div>Following piece of code does the actual show/hide job (by specified criteria):</div><div>
</div><div><div>function show_elems(filt)</div><div>{</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var all = $('.game-list .games > ul > li').hide();</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>if (filt['soft'] != '') all = all.filter('.'+filt['soft']);</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>if (filt['cat'] != '')  all = all.filter('.'+filt['cat']);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>all.show();</div><div>}</div><div>
</div><div>All this lengthy introduction is because of the fact that this code (and whole page) works very well (almost to say perfectly) in all but webkit-based browsers (namely, safari and chrome). After some lengthy discussions on webkit irc support channel, discovering a bug in webkit, etc, one of developers found a way to optimize .hide() method so that it doesn't trigger that specific bug. After I made proposed change in jquery.js, the problem has disappeared, while functionality was preserved.</div>
<div>
</div><div><div><span class="Apple-style-span" style="font-family: Verdana; font-size: 12px; "><span class="bz_comment" style="display: block; background-color: rgb(221, 221, 221); border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(187, 187, 187); padding-top: 2px; padding-right: 0px; padding-bottom: 2px; padding-left: 0px; "><i>Comment #4 From <a href="mailto:mrowe@apple.com" style="color: rgb(0, 51, 153); ">Mark Rowe (bdash)</a> 2009-01-31 03:54 PDT</i></span><pre id="comment_text_4">
I suspect that a trivial change to jQuery could be made to avoid tickling this
performance cliff. If the "hide" method were changed to use two separate loops
it would avoid modifying the style info between each query of the "display"
property and would therefore avoid the need to re-layout so many times.
Something like the following:
hide: function(speed,callback){
if ( speed ) {
return this.animate( genFx("hide", 3), speed, callback);
} else {
for ( var i = 0, l = this.length; i < l; i++ ){
var old = jQuery.data(this[i], "olddisplay");
if ( !old && old !== "none" )
jQuery.data(this[i], "olddisplay", jQuery.css(this[i], "display"));
}</pre><pre id="comment_text_4"> for ( var i = 0, l = this.length; i < l; i++ )
this[i].style.display = "none";
}
},
</pre><pre id="comment_text_4">
</pre><pre id="comment_text_4"><span class="Apple-style-span" style="font-family: arial;">This is not to say that jQuery is to blame; quite opposite: they are glad that it helped the bug to uncover itself; this is at the same time both performance optimization and a workaround for problem that's going to be fixed sometime soon.</span></pre>
<pre id="comment_text_4"><span class="Apple-style-span" style="font-family: arial;">
</span></pre><pre id="comment_text_4"><span class="Apple-style-span" style="font-family: arial; ">Regards,</span>
</pre><pre id="comment_text_4">
<span class="Apple-style-span" style="font-family: arial; ">Boris</span>
</pre></span></div></div></div>