Bug Tracker


Ticket #7681 (closed bug: invalid)

Opened 3 years ago

Last modified 18 months ago

backgroundPosition animate in IE

Reported by: csulok0000@… Owned by:
Priority: undecided Milestone: 1.6
Component: effects Version: 1.4.4
Keywords: Cc:
Blocking: Blocked by:


example: <td valign="top" id="tartalom_hatter" style="background:url(img/kep.png) 1032px top repeat-y;">...</td> ... The script: jQuery('#tartalom_hatter').animate({backgroundPosition: '500px 0px'},1000); This code doesn't work in IE 8, but works in fox,opera and chrome. Error in jquery.fx.tick._default() function. The fx.now value in IE is NaN!

Sorry: I badly speak english.

Change History

comment:1 Changed 3 years ago by anonymous

This is works at 1.4.2, but 1.4.3 not.

comment:2 Changed 3 years ago by jitter

  • Status changed from new to closed
  • Resolution set to invalid
  • Component changed from unfiled to effects

Thanks for taking the time to contribute to the jQuery project by writing a bug report!

The documentaion on  animate() says

All animated properties should be a single numeric value


Shorthand CSS properties (e.g. margin, background, border) are not supported.

Both of these apply to background-position which means the docs say you can't use animate() to animate this property (I won't go into detail why it nonetheless works in some browsers but not in IE).

You use the cssHooks feature introduced with jQuery 1.4.3 to solve this problem or just use the ready made cssHook for background-position from the  jquery-cssHooks plugin

Next time please submit a reduced test case, which reproduces the issue you are experiencing, on  http://jsfiddle.net along with the report. So that we investigate the issue more quickly.

comment:3 Changed 3 years ago by anonymous

I'm not positive this should be closed.

To my knowledge the shorthand for background is simply using "background" to set all of your background property values.

For example, in css it would look like: background:#ffffff url('image.png') no-repeat right top;

Anything extending background, like background-position, would not shorthand and is the most specific method of setting background-position.

As for being a single numeric value ... This seems to be true since background-position requires two values.

comment:4 Changed 3 years ago by anonymous

I had good success animating background-position-y and background-position-x separately. Worked fine for me in IE8!

$(iPhoneScroll).animate({'background-position-x': -index*324+"px"}, 500);

comment:5 Changed 3 years ago by koen@…

In version 1.4.4 this is "a problem" as well. On line 5500 it says: elem.currentStyle[ name ], with in this case name = 'backgroundPosition'.

IE only has backgroundPositionX en backgroundPositionY in the currentStyle property, so I guess backgroundPosition really is a shorthand. The behaviour here is correct although a little confusing, because of the double level of shorthand: background -> backgroundPosition -> backgroundPositionX

comment:6 Changed 3 years ago by Eydamos

Beware: backgroundPositionX and backgroundPositionY are not working in Firefox and Opera

comment:7 follow-up: ↓ 8 Changed 3 years ago by anonymous

Changing the code to the following fixed the problem for me:

  fx.elem.style[ fx.prop ] = 0 + fx.unit;
  fx.elem.style[ fx.prop ] = (fx.prop === "width" || fx.prop === "height" ? Math.max(0, fx.now) : fx.now) + fx.unit;

comment:8 in reply to: ↑ 7 Changed 3 years ago by anonymous

very good!! it works! thanks.

Replying to anonymous:

Changing the code to the following fixed the problem for me:

  fx.elem.style[ fx.prop ] = 0 + fx.unit;
  fx.elem.style[ fx.prop ] = (fx.prop === "width" || fx.prop === "height" ? Math.max(0, fx.now) : fx.now) + fx.unit;

comment:9 Changed 2 years ago by jeremy@…


For me, this fixed IE throwing an error (thank you!) However I also had to go back and update the animate calls that were based on css background-position to use background-position-x and background-position-y for browsers older than 9.

Example: before - $(element).delay(400).animate({'background-position': '-92px 0'},400); after - $(element).delay(400).animate({'background-position-x': '-92px'},400);

I'm not moving on the Y axis so it can stay 0 ( as not specified ).

comment:10 Changed 2 years ago by dmethvin

As documented, .animate() has never supported animation of shorthand properties (ones that consist of multiple values separated by spaces).

comment:11 Changed 2 years ago by anonymous

I've tried all of this, and none of this works. IE8 (which is the browser of choice from clueless executives apparently) doesn't accept 'background-position-y', or (of course) 'backgroundPositionY'. With a position of 'top center', I can't use a number for my left position.

I need a solution that work with IE. Any suggestions?

comment:12 Changed 18 months ago by anonymous

remove the PX

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.


Add a comment

Modify Ticket

as closed

E-mail address and user name can be saved in the Preferences.

Note: See TracTickets for help on using tickets.