IE8 unspecified error - TweenMax

[BarryS]

Hi Guys,

 

I'm having a problem with IE8.

 

My code works fine on IE6,7 and 9, and all Firefoxes that I have tested on. However, in IE8 it throws an error when you select the coloured buttons at the top of the page that animate a large DIV container from left to right.

 

I can't really explain very well without you looking at an example. See here:

 

http://www.cblendedlearning.com/greensock/example_code_for_greensock/

 

All the Tweening is in the index.html and you need to select the coloured dots at the top of the screen. You may find that the first you click does work, but the error is thrown on the next click.

 

In IE8 the debugger states there is an unspecified error on line 75 of TweenMax.min.js. The code highlighted is c[v.replace(h,d)]=g[v].... Though this doesnt mean a lot to me!

 

Before posting I downloaded the latest version of the greensock-v12-js and tried both TweenMax.js and TweenMax.min.js

 

Thanks in advance.

 

Barry

[jamiejefferson]

Hmmm if I had IE8 or IEtester available I could take a good look at this for you and give you a more definitive answer. My guess is one of the css className tweens are choking on the css somewhere, but I really can't be sure. Instead maybe I can offer some insights into what I can immediately notice that may set you on your way.

 

First thing I would suggest in any debugging environment is stop using minified javascripts (i.e. *.min.js). Minified javascripts are nigh impossible to debug as you've noticed, but if you use the unminified code you can at least get a good indication of where the code error is originating. Nothing wrong with minified files in a finalised production, but testing should be done with verbose scripts otherwise you're not going to have any fun at all.

 

Secondly, although it's probably not a related issue, IE8 doesn't have a preventDefault for events. I know it is cumbersome, but I usually use the following to prevent mouseclicks from having any further effect

if(!e) var e = window.event;
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
} else if (event.preventDefault) {
event.preventDefault();
}

/* code goes here */

return false;

Without a better test environment I can't get any further than this general advice sorry, but I find if I am getting rubbish debug info the first thing I want to do is find out what line of mine is initiating the bug. You know it happens on a click, so throw in a few alerts and step through the click function until the error occurs and you should get a better idea of where the problem lies e.g.

$("#PinkSlide").click(function(e) {
alert('pinkslide click');
TweenLite.to($("#TextContainer").find("div"), 0, {css:{autoAlpha:0}});
alert('pinkslide 1');
TweenLite.to($("#IntroText"), 0.5, {css:{autoAlpha:1}});
alert('pinkslide 2');
TweenLite.to($('#Slider'), 2, {css:{left:'0'}, ease:Power2.easeInOut} );
alert('pinkslide 3');
TweenLite.to([$('#StripeOne'),$('#StripeTwo'),$('#StripeThree')], 2, {css:{className:"PinkStrip"}});
alert('pinkslide 4');
$("#headerText").html("The way we were...");
alert('pinkslide 5');
TweenLite.to($('#headerText'), 1, {css:{className:"Pink"}});
alert('pinkslide 6');
TweenLite.to($("#Slider").find("img"), 0, {css:{className:"-=TimelineSelected"}});
alert('pinkslide 7');
e.preventDefault();
alert('pinkslide click complete');
});

If you see an alert 'pinkslide 3' just before the exception, then you know the following line is causing a problem.

[Rodrigo]

Hi,

 

There's a lot going on in your code, and like Jamie says IE8 has a major collapse with preventDefault() so my suggestion will be to try this:

 

 

if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false; 
};

 

Cheers,

Rodrigo.

[BarryS]

Hi guys,

 

Thank you for taking the time to reply and offer some advice. I'll give it a go now and let you know how I get on.

 

Thanks again,

 

Barry

[BarryS]

Hi guys,

 

Using alerts made me think "Why not just comment out a line of code at a time until I know which one is buggy".

 

The offending example code is shown below (a similar line was used on each of the four clicks):

 

TweenLite.to($('#headerText'), 1, {css:{className:"Pink"}});

 

And CSS:

 

#headerText {
margin:10px 0px 0px 15px;
}
.Pink {
color:#CA005D;
}
.Orange {
color:#F0AB00;
}
.Green {
color:#008566;
}
.Black {
color:#000000;
}

 

Why IE8 doesnt like it I dont know, but I've had to remove it for now.

 

Thanks again for the pointers.

 

Cheers,

 

Barry

[Rodrigo]

Hi Barry,

 

Glad to hear you find out where is the problem, but it's a strange behavior to say the least. Question, have you tried changing the tween effect?, i mean try something like this:

TweenLite.to($('#headerText'), 1, {css:{autoAlpha:0.5}});

in order to see if the style changing is what is causing the trouble or if maybe something else.

 

And like Jamie said try using the uncompressed code in order to pinpoint the problem.

 

And another suggestion, try a web safe color to see if that could be causing trouble.

 

http://www.w3schools...html_colors.asp

 

Cheers,

Rodrigo.

[BarryS]

Hi Rodrigo,

 

Thank you for your suggestions. You were right about the CSS mucking it up. It seems that when I used an embedded @font-face and then tried to tween classes that changed it colour then IE8 had issues. At first I removed the font-face and used standard text and this was fine. I then went back and re-added the font-face but then simply used TweenLite to swap the class using a 0 second tween rather than fading it like I did before.

 

TweenLite.to($('#headerText'), 0, {css:{className:"Pink"}});

 

This works an I'm happy.

 

Thanks for your help.

 

Cheers,

 

Barry

[Rodrigo]

Hi Barry,

 

No problemo...

 

I got a little intrigued by your problem so i looked up for some information and i found this regarding the @font-face rule and IE8:

 

http://msdn.microsoft.com/en-us/library/ie/ms530757%28v=vs.85%29.aspx

 

I also read in StackOverflow that in the @font-face rule, the recommendation is to use quotation marks in the font-family property.

 

And finally take a look at this:

 

http://css-tricks.com/snippets/css/using-font-face/

 

Cheers,

Rodrigo.