Skip to main content

Bug Tracker

Side navigation

#7450 closed bug (duplicate)

Opened November 09, 2010 04:33PM UTC

Closed November 09, 2010 07:34PM UTC

Last modified March 13, 2012 06:57PM UTC

Animate with left position below -10000px is buggy - inserts an animate to 0 in the middle

Reported by: lazahu@gmail.com Owned by:
Priority: low Milestone: 1.5
Component: effects Version: 1.4.3
Keywords: left position animation Cc:
Blocked by: Blocking:
Description

Test the code below and go beyond the 100th block with the right arrow. An extra stage (left:0) is inserted in the middle of the animation. Works perfect with 1.4.2.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Animate bug</title>
<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif;}
#container {position:relative;height:100px;}
#container .btn {position:absolute;width:100px;bottom:0;font-size:64px;text-decoration:none;}
#container #left {left:0;}
#container #right {right:0;}
#container .btn a {display:block;line-height:100px;text-align:center;text-decoration:none;}
#window {position:absolute;left:100px;right:100px;top:0;bottom:0;overflow:hidden;border:1px solid #ccc;}
#window ul {position:absolute;left:0;top:0;width:20000px;list-style:none;margin:0;padding:0;}
#window ul li {float:left;display:inline;width:94px;height:92px;line-height:92px;margin:3px;padding:0;text-align:center;font-size:32px;color:#999;background-color:#eee;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	for(var i=0; i<200; i++)
		$('#scroll').append('<li>'+i+'</li>');
	$('#left>a').click(function(){
		var ww=$('#window').width();
		var cleft=$('#scroll').position().left;
		$('#scroll').stop(true,false).animate({left:Math.min(cleft+ww,0)},2000);
	});
	$('#right>a').click(function(){
		var ww=$('#window').width();
		var cleft=$('#scroll').position().left;
		$('#scroll').stop(true,false).animate({left:Math.max(cleft-ww,-20000+ww)},2000);
	});
});
</script>
</head>
<body>
	<div id="container">
		<div class="btn" id="left"><a href="javascritp:void(0)"><</a></div>
		<div class="btn" id="right"><a href="javascritp:void(0)">></a></div>
		<div id="window">
			<ul id="scroll"></ul>
		</div>
	</div>
</body>
</html>
Attachments (0)
Change History (7)

Changed November 09, 2010 04:54PM UTC by jitter comment:1

Duplicate of #7193.

Thanks for the report but the next time please consider following the procedure detailed under How to Report Bugs. Then you should have found that this was already reported.

Additionally as described it would have been good practice to not paste a html blob in the ticket but instead link to a test case on http://jsfiddle.net which is reduced to bare minimum to reproduce the problem.

Changed November 09, 2010 07:34PM UTC by addyosmani comment:2

component: unfiledeffects
keywords: → left position animation
priority: undecidedlow
resolution: → duplicate
status: newclosed

Changed November 09, 2010 07:34PM UTC by addyosmani comment:3

Duplicate of #7193.

Changed November 09, 2010 09:44PM UTC by lazahu@gmail.com comment:4

Thanks for the report but the next time please consider following the procedure detailed under How to Report Bugs. Then you should have found that this was already reported.

Sorry for the duplicate post. I did some research but couldn't find the original report. This is my first bug report and I wasn't aware your policies, please forgive my ignorance.

Changed November 10, 2010 02:05PM UTC by anonymous comment:5

I've been experienced the same issue with a slide show implementation, where I animate margin-left. Works fine as long as the margin-left start value does not go below -10 000 (as in -10 001 etc). It does animate fine to any value less than -10 000.

The issue was solved by downgrading the jQuery core package to 1.4.2.

Changed November 12, 2010 10:49AM UTC by lazahu@gmail.com comment:6

A heuristic bugfix starting from line 6617 in jQuery.fx.prototype:

	// Get the current size
	cur: function() {
		if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
			return this.elem[ this.prop ];
		}

		var r = parseFloat( jQuery.css( this.elem, this.prop ) );
		return r;
	},

Changed November 22, 2010 03:22AM UTC by snover comment:7

This is a duplicate of another bug, as indicated above. Please stop commenting on this bug.