IE8 backgroundPosition TweenMax bug?

[haxen2000]

Not sure if this is me or not, so I wanted to check it out. I am more or less doing an animation with a sprite map. When trying to change the backgroundPosition in IE8 I get an error. But changing the backgroundPositionX and Y individually is fine. Here is my code:

var flame = document.createElement('div');
.
.
.

flame.style.overflow = 'hidden';
flame.style.backgroundImage = 'url("my_files/images/flame.png")';
var tl = new TimelineMax( { repeat:-1 } );
tl.to(flame, 0, { css:{ 'backgroundPositionX':'-5px', 'backgroundPositionY':'-7px' } }, 0); //no error in IE8
tl.to(flame, 0, { css:{ 'backgroundPosition':'-17px -4px' } }, .1); //error in IE8

The error is: SCRIPT5007: Unable to get property 'backgroundPositionX' of undefined or null reference
TweenMax.min.js, line 15 character 22204

 

Please let me know if I'm coding this wrong. Thanks!

[Jonathan]

Hello

 

This is NOT a GSAP TweenMax bug, but is a bug in IE8.

 

IE8 does not understand the shorthand background-position property, and it returns undefined. It does however accept background-position-x and background-position-y.

 

Its probably best to just target the background-position-x and background-position-y properties separate so you cam avoid IE8 returning undefined.

 

Or you could check if its IE8, and then apply like this:

// check if not IE8
if(document.documentMode === undefined || document.documentMode > 8){
      // for firefox, chrome, no IE browsers
      tl.to(flame, 0, { css:{ 'backgroundPositionX':'-5px', 'backgroundPositionY':'-7px' } }, 0);
} else {
      // for IE browsers
      tl.to(flame, 0, { css:{ 'backgroundPosition':'-17px -4px' } }, .1); 
}

Also maybe just having a variable for the css object

var cssObject;

// check if not IE8
if(document.documentMode === undefined || document.documentMode > 8){
       // for firefox, chrome, no IE browsers
       cssObject =   {'backgroundPositionX':'-5px', 'backgroundPositionY':'-7px'};
} else {
       // for IE browsers
       cssObject =   {'backgroundPosition':'-17px -4px'},
}
tl.to(flame, 0, {css:cssObject}, .1); 

I believe, not sure though, that IE9 and IE10 support the shorthand background-position property, so the  above checks if its anything IE8 and below.

 

I hope this helps

[haxen2000]

Thanks @jonathan. That is what I ended up doing (my 'isBrowserIE8' function is similar to your check):

if (isBrowserIE8()) {
	tl.to(flame, 0, { css:{ 'backgroundPositionX':'-5px', 'backgroundPositionY':'-7px' } }, 0);
	tl.to(flame, 0, { css:{ 'backgroundPositionX':'-17px', 'backgroundPositionY':'-4px' } }, .1);
	tl.to(flame, 0, { css:{ 'backgroundPositionX':'-27px', 'backgroundPositionY':'-4px' } }, .2);
	tl.to(flame, 0, { css:{ 'backgroundPositionX':'-40px', 'backgroundPositionY':'-5px' } }, .3);
	tl.to(flame, 0, { css:{ 'backgroundPositionX':'-54px', 'backgroundPositionY':'-5px' } }, .4);
}
else {
	tl.to(flame, 0, { css:{ 'backgroundPosition':'-5px -7px' } }, 0);
	tl.to(flame, 0, { css:{ 'backgroundPosition':'-17px -4px' } }, .1);
	tl.to(flame, 0, { css:{ 'backgroundPosition':'-27px -4px' } }, .2);
	tl.to(flame, 0, { css:{ 'backgroundPosition':'-40px -5px' } }, .3);
	tl.to(flame, 0, { css:{ 'backgroundPosition':'-54px -5px' } }, .4);
}

I figured it was IE and not GS but wanted to double check!

[jamiejefferson]

I'm a little bit lost as to what was actually happening here. GSAP absolutely supports backgroundPosition tweens in IE8, as evidenced here:

 

See the Pen mzHub by jamiejefferson (@jamiejefferson) on CodePen

See the Pen mzHub by jamiejefferson (@jamiejefferson) on CodePen

(for viewing in IE8)

 

Even the error you had suggested the problem is with backgroundPositionX (Unable to get property 'backgroundPositionX' of undefined or null reference) not backgroundPosition...

 

You shouldn't need to be testing for IE8 in this situation. Is it possible you are using a very old version of GSAP? I'd recommend using the latest version (get GSAP button at the top of this page). If that doesn't help could you try adjusting the example on codepen to show the error?

[Jonathan]

Looks like Jamie is right.. in my tests on PC XP real IE8.. i noticed that IE8 doesn't understand the get shorthand background-position, but it understands the set of shorthand background-position. But i will test with latest version of GSAP, and check Jamie's examples on my PC XP real IE8.

 

Also i know that IE7 and below doesn't support the shorthand property.. but it does support background-position-x and background-position-y.

 

As far as IE8, i noticed that even with jQuery it doesn't understand getting or setting shorthand background-position, but understands the background-position-x and background-position-y. And there are still bugs from 5 years ago waiting to get fixed for jQuery and IE8. But with jQuery 2.0 out now, it has dropped support for IE 6, 7, and 8.

 

But like Jamie has shown, GSAP has NO problem getting around the pain in the neck, that is IE.