backgroundPositonY property does not work on firefox

[bokan]

I used the backgroundPositonY property to animate background-postion-y css.

 

It works fine in chrome and IE, but not on firefox.

 

Where should we post issues ?

[Jonathan]

Hello bokan, and welcome to the GreenSock Forum!

 

Have you tried just using the shorthand background-position property?

 

Firefox expects it to be the shorthand method, and considers background-position-x and background-position-y to be non-standard. So its best to just use the background-position shorthand property so you can keep your code standards and compliant cross browser.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

 

There is currently a bug report for Mozilla about this:

 

https://bugzilla.mozilla.org/show_bug.cgi?id=550426

 

But Firefox will keep it out of their browser since it is not part of the CSS3 spec. Chrome and Safari webkit have those properties but they will report different values with the shorthand version when zoomed in/out and are not to be trusted.

 

So to play it safe just use the background-position (backgroundPosition) shorthand property.

 

More info:

http://lists.w3.org/Archives/Public/www-style/2012Feb/0898.html

http://lists.w3.org/Archives/Public/www-style/2014Apr/0188.html

http://lists.w3.org/Archives/Public/www-style/2011Aug/0419.html

http://www.w3.org/Style/CSS/Tracker/issues/9

http://www.w3.org/blog/CSS/2012/03/10/resolutions-26/

 

[Rodrigo]

Hi,

 

Yep, indeed using backgroundPositionY in the config object has no effect whatsoever. The solution could be use both values and just change the one corresponding to the Y axis, like this:

// we're assuming that the original background position in the CSS styles is 100px 100px, for the X and Y axis respectively.
TweenLite.to(element, 1, {backgroundPosition:"100px 0px"});

PS: I see Jonathan beat me to it and His answer is far better and complete than mine, nice job Jonathan!!