Bug Tracker

Modify

Ticket #5430 (closed bug: invalid)

Opened 4 years ago

Last modified 3 years ago

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:
Blocking: Blocked by:

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

Change History

comment:1 Changed 4 years ago by john

  • Component changed from unfilled to fx

comment:2 Changed 4 years ago by 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>

comment:3 Changed 3 years ago by addyosmani

  • Status changed from new to closed
  • Resolution set to invalid

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.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.