Skip to main content

Bug Tracker

Side navigation

#3881 closed bug (fixed)

Opened January 15, 2009 09:36PM UTC

Closed December 05, 2009 05:11AM UTC

Last modified March 14, 2012 01:15PM UTC

some easing throws error in IE or invalid CSS in FF3

Reported by: jtnix Owned by:
Priority: minor Milestone: 1.4
Component: effects Version: 1.4a1
Keywords: animate, easing Cc:
Blocked by: Blocking:
Description

If trying to animate an element with very small dimensions or width & height of 0 over a long distance (300+ px) Firebug identifies invalid CSS for width & height (and sometimes top & left, depending on the distance while IE6 javascript throws this error:

Line 4031 of jquery-1.3.js

Invalid Argument

Line 4031: fx.elem.style[ fx.prop ] = fx.now + fx.unit;

Demonstration page: http://nixbox.com/demos/easinganimate.html

This seems to only happen with easing that has a 'backing' effect, like easeInBack or easeInElastic. I assume it is trying to set the properties with negative or invalid values while performing the backing math, since the start size is so small.

At one point I was able to get a full break in Firefox using latest Firebug while testing this problem, but cannot recreate.

No problems in latest Webkit or Safari 3.1.

Attachments (0)
Change History (3)

Changed January 17, 2009 10:40PM UTC by john comment:1

resolution: → invalid
status: newclosed

Are you saying that this exception is new in jQuery 1.3? It sounds like this is a problem with the easing functions themselves. Please re-open if this is a new issue in 1.3.

Changed January 18, 2009 06:30AM UTC by jtnix comment:2

resolution: invalid
status: closedreopened

I just checked 1.2.6, and this behavior appears in both versions.

As far as I know, the easing library just does math, no bounds checking on certain properties that I can see was part of the original easing call. Negative values can be useful animating top and left but doesn't play nice with CSS width and height.

here is another test:

<div id="testbox"></div>

<p><a href="#" onclick="$('div#testbox').css({width:-5,height:-5})">set width + height to neg vals via css</a></p>

which you can try here, first link: http://nixbox.com/demos/easinganimate.html

This gives the same CSS parsing error for width and height in firebug and dies in IE with Invalid Argument, except now at line 1050: elem[ name ] = value; ( of jquery-1.3.js)

normally I don't think people would think to set css width/height to neg values, but since some fx math will potentially return negative values as a matter of function, and potentially be applied to a css animation set, and that can makes IE cry, so...

I guess the decision is it worth it to patch just so IE doesn't throw a fit in this off-chance?

Changed December 05, 2009 05:11AM UTC by john comment:3

milestone: 1.3.11.4
resolution: → fixed
status: reopenedclosed
version: 1.31.4a1