Bug Tracker

Opened 6 years ago

Closed 6 years ago

Last modified 5 years ago

#7450 closed bug (duplicate)

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

Reported by: lazahu@… 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)">&lt;</a></div>
		<div class="btn" id="right"><a href="javascritp:void(0)">&gt;</a></div>
		<div id="window">
			<ul id="scroll"></ul>
		</div>
	</div>
</body>
</html>

Change History (7)

comment:1 follow-up: Changed 6 years ago by jitter

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.

comment:2 Changed 6 years ago by addyosmani

  • Component changed from unfiled to effects
  • Keywords left position animation added
  • Priority changed from undecided to low
  • Resolution set to duplicate
  • Status changed from new to closed

comment:3 Changed 6 years ago by addyosmani

Duplicate of #7193.

comment:4 in reply to: ↑ 1 Changed 6 years ago by lazahu@…

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.

comment:5 Changed 6 years ago by anonymous

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.

comment:6 Changed 6 years ago by lazahu@…

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;
	},

comment:7 Changed 6 years ago by snover

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

Note: See TracTickets for help on using tickets.