Ticket #8188 (closed bug: duplicate)
jQuery .animate() causes failure in <=IE8 on z-index property
| Reported by: | KuraFire | Owned by: | |
|---|---|---|---|
| Priority: | high | Milestone: | 1.next |
| Component: | effects | Version: | 1.5 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
Related to: http://bugs.jquery.com/ticket/5001
In jQuery (1.5 and below), the .animate() step: method will add a unit of "px" even when animating the z-index property. This doesn't trouble modern browsers, but IE8 and below don't understand a value of "z-index: 0px" and throws an error, failing entirely.
The related ticket linked above is closed as WontFix, but I think this particular use case is quite legitimate and should be fixed. Animating on z-index is a great way to do custom run loops (which I just wrote a plugin for, hence how this got discovered) in a way that doesn't cause reflow and doesn't require constant unit processing.
I fixed it in my own version by doing this crude fix (lines 7768-7775):
_default: function( fx ) {
if ( fx.elem.style && fx.elem.style[ fx.prop ] != null ) {
fx.unit = ( fx.prop == "zIndex" ) ? "" : fx.unit; /* Bug fix : Faruk Ates */
fx.elem.style[ fx.prop ] = (fx.prop === "width" || fx.prop === "height" ? Math.max(0, fx.now) : fx.now) + fx.unit;
} else {
fx.elem[ fx.prop ] = fx.now;
}
}
Change History
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

Here is a demo of my plugin, using a locally hosted, bug-fixed version of jQuery 1.5:
http://files.farukat.es/creations/runloop-bug/
And here is the same page, using a stock jQuery 1.5 that fails in IE(8):
http://files.farukat.es/creations/runloop-bug/stock-jquery-1.5.html