animate width not working properly on Webkit? (1.3.2 vs. 1.2.6/1.3.1)

[maniqui]

This has been reported first here: ​http://groups.google.com/group/jquery-dev/browse_thread/thread/9be75ae3b47eed61/c03fd1dc04a1a5dd?#c03fd1dc04a1a5dd

John Resig suggested a few tests that didn't work.

Below, I copy the original post. I think that test cases linked below are still valid.

This bug seems to affect just Webkit (Safari/Chrome) browsers. The thing have been working fine with jQuery 1.2.6 to jQuery 1.3.1 It begun to fail with jQuery 1.3.2.

Testing environment

• Working version (jQuery 1.2.6/1.3.1):

​http://test.rudysmusic.com/electric-guitars/pre-owned/?jquery=1.2.6 ​http://test.rudysmusic.com/electric-guitars/pre-owned/?jquery=1.3.1

• Failing version (jQuery 1.3.2):

​http://test.rudysmusic.com/electric-guitars/pre-owned/?jquery=1.3.2

Expected behavior (working with 1.2.6/1.3.1)

If you click on a product picture, a panel (a div with class "text- column") will open up on the right, by width being animated. Also, the whole page width is being manipulated to fit the new width.

Then, if you click on the "Close" button, the same panel will close (width being animated to 0px) and the whole page width is also manipuleted to fit the new width.

Works fine on all modern browsers, including Webkit.

Triggering the bug (failing with 1.3.2)

On a Webkit browser, if you click on a product picture, you will see that the panel (a div with class "text-column") is also opened suddenly, not animated. In other words, it reaches the final width without being animated.

Then, also, if you click on the "Close" button, the same panel will be closed (animated) but for some reason, it won't fully "disappear". You will notice there is a shadow border which demonstrate that the panel is "still there" (sorry, not sure how to explain this). Finally, because of this behavior, the whole page layout is broken, making the list of product disappear.

The issue seems to be on animate()

This are the "offending" lines:

When opening:

$text_column.css({"display":"block"}).animate({"width": w}, "normal",

"linear", function(){

(...)

});

When closing:

$text_column.animate({"width":"0px"}, "normal", "linear", function(){

$text_column.css({"display":"none"}); (...)

});

You can see them in original context here: ​http://test.rudysmusic.com/js/rudysmusic.js

Is there anything I can do to help? Can anyone confirm that the thing I'm reporting is a bug and not a misunderstanding on changes between jQuery 1.2.6/1.3.1 and jQuery 1.3.2.

Thanks in advance. Julián

[caii]

Maybe the like the below:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<div style="float:left; height:300px; background:yellow; padding:10px;">
		<div style="float:left; width:300px; height:250px; background:#999;">&nbsp;</div>
		<div id="b" style="float:left; width:0px ; height:300px; background:#ccc">
				<div id="wa"  style="float:left; width:120px; height:40px; background:#000;">id "wa"</div>
				<div id="wb" style="width:80px; height:40px; background:green; float:left;">hh</div>
		</div>
</div>
<script type="text/javascript">
$("#b").animate({width:700},5000);
</script>

[addyosmani]

The original test cases provided are currently down or no longer available (a database error is incurred when trying to access them). Could you please re-submit your ticket with valid test cases for us to investigate?.

I notice that this ticket is around 10 months old so we appreciate if you are no longer able to do this. Anything you can provide us to test the original issue just to confirm it does indeed occur across updated versions of Webkit would be appreciated.