Skip to main content

Bug Tracker

Side navigation

#7681 closed bug (invalid)

Opened December 02, 2010 09:45AM UTC

Closed December 02, 2010 11:25AM UTC

Last modified October 09, 2012 09:58PM UTC

backgroundPosition animate in IE

Reported by: csulok0000@gmail.com Owned by:
Priority: undecided Milestone: 1.6
Component: effects Version: 1.4.4
Keywords: Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (12)

Changed December 02, 2010 09:50AM UTC by anonymous comment:1

This is works at 1.4.2, but 1.4.3 not.

Changed December 02, 2010 11:25AM UTC by jitter comment:2

component: unfiledeffects
resolution: → invalid
status: newclosed

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

and

>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.

Changed December 10, 2010 04:47PM UTC by anonymous comment:3

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.

Changed December 15, 2010 04:12PM UTC by anonymous comment:4

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);

Changed December 16, 2010 08:37PM UTC by koen@isaac.nl comment:5

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

Changed February 07, 2011 10:28AM UTC by Eydamos comment:6

Beware:

backgroundPositionX and backgroundPositionY are not working in Firefox and Opera

Changed August 17, 2011 03:50PM UTC by anonymous comment:7

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

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

Changed October 09, 2011 04:50PM UTC by anonymous comment:8

very good!! it works! thanks.

Replying to [comment:7 anonymous]:

Changing the code to the following fixed the problem for me:
> if(isNaN(fx.now))
>   fx.elem.style[ fx.prop ] = 0 + fx.unit;
> else
>   fx.elem.style[ fx.prop ] = (fx.prop === "width" || fx.prop === "height" ? Math.max(0, fx.now) : fx.now) + fx.unit;
> 

Changed February 29, 2012 08:58PM UTC by jeremy@conceptionx.com comment:9

THIS NEEDS TO BE RE-OPENED

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 ).

Changed February 29, 2012 09:02PM UTC by dmethvin comment:10

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

Changed March 13, 2012 08:49PM UTC by anonymous comment:11

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?

Changed October 09, 2012 09:58PM UTC by anonymous comment:12

remove the PX