Bug Tracker

#10539 closed bug (fixed)

Opened October 20, 2011 07:09AM UTC

Closed December 04, 2012 05:44AM UTC

animate() might cause error in IE6-8

Reported by: abiao.chen Owned by:
Priority: low Milestone: 1.8
Component: effects Version: 1.6.4
Keywords: Cc:
Blocked by: Blocking:
Description

On IE 6-8, some page will throw an error when calling

$("ul").animate({"left":"0%"}, 500)

After debugging, I found the animate() function(For 1.6.4, Line8286-8288) will compute start value by moving the element and testing the pixelLeft attribute.

	jQuery.style( this, p, (end || 1) + unit);
	start = ((end || 1) / e.cur()) * start;
	jQuery.style( this, p, start + unit);

The first line will call

elem.style["left"]="1%"

to set the elem position. In IE6-8, this might NOT modify the pixelLeft attribute, for example the width of the containing block is 0. Thus, the e.cur() in the second line returns 0, and start value becomes NaN, which causes error in the later step( for 1.6.4, Line 8296).

For better robustness, I suggest to test the e.cur() return value in the second line, likes:

start = (e.cur() == 0) ? 0 : ((end || 1) / e.cur()) * start;

here is the test HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--[bchen8]2011-9-22-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Page Title</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script>
function move() {
    $("ul").animate({"left":"0%"}, 500);
}
</script>
</head> 

<body>
    <a href='javascript:move()' style="left:0"><tr>click</tr></a>

    <div style="width:0">
        <ul style="left: 0%;">
        </ul>
    </div>

</body>
</html>
Attachments (0)
Change History (3)

Changed October 20, 2011 09:23PM UTC by dmethvin comment:1

component: unfiled → effects
priority: undecided → low
status: new → open

Changed January 12, 2012 06:29PM UTC by BiAiB comment:2

This bug has the side effect of not setting the timerId to false, which will block any further animate call. I think it's because of this line (8397):

if ( t() && jQuery.timers.push(t) && !timerId ) {

this totally freeze the application I work on. Here's my fix (~8207~8213 on v1.6.2):

	// We need to compute starting value
	if ( unit !== "px" ) {
		jQuery.style( this, p, (end || 1) + unit);
		//bugfix IScope http://bugs.jquery.com/ticket/10539#comment:1
		//start = ((end || 1) / e.cur()) * start;
		var cur = e.cur();
		start = cur==0?0:(((end || 1) / cur) * start);
		jQuery.style( this, p, start + unit);
	}

Changed December 04, 2012 05:44AM UTC by gibson042 comment:3

milestone: None → 1.8
resolution: → fixed
status: open → closed