Skip to main content

Bug Tracker

Side navigation

#5430 closed bug (invalid)

Opened October 30, 2009 10:20PM UTC

Closed October 06, 2010 12:38AM UTC

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

Reported by: maniqui Owned by:
Priority: minor Milestone: 1.4
Component: effects Version: 1.3.2
Keywords: animate width webkit Cc:
Blocked by: Blocking:
Description

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

Attachments (0)
Change History (3)

Changed November 11, 2009 08:13PM UTC by john comment:1

component: unfilledfx

Changed December 09, 2009 08:46AM UTC by caii comment:2

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;"> </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>
 

Changed October 06, 2010 12:38AM UTC by addyosmani comment:3

resolution: → invalid
status: newclosed

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.