Bug Tracker

Modify

Ticket #7450 (closed bug: duplicate)

Opened 3 years ago

Last modified 2 years ago

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

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

comment:1 follow-up: ↓ 4 Changed 3 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 3 years ago by addyosmani

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

comment:3 Changed 3 years ago by addyosmani

Duplicate of #7193.

comment:4 in reply to: ↑ 1 Changed 3 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 3 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 3 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 3 years ago by snover

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

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.