Jump to content
Search Community

Compatible with ie8?

bcaz test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Could you provide more details about how you confirmed it is not a Sitefinity issue? Can you reproduce this outside of Sitefinity and Superscrollorama? As Rodrigo said, the error clearly indicates that there's something being added to the timeline that doesn't belong there. I'm pretty sure that's not a GSAP problem - it's a problem with the code that's using GSAP. I certainly could be mistaken though. It'd be helpful to see a simplified example in a codepen or jsfiddle.

  • Like 2
Link to comment
Share on other sites

I have a feeling it will be line 90 of mastertrainer.js - remove the comma at the end of this line and see if that changes anything.

 

IE8 and below do not allow trailing commas in arrays. Esssentially undefined is added after the comma which will break your code 99% of the time. In IE8 your code is asking GSAP to append undefined to the TimeLine and of course it's not allowed. In other browsers the trailing comma is ignored which is why it is only breaking in IE8.

 

I recommend you get comfortable using the developer tools in IE. Press F12 to open them and swap to the console tab. The first thing I saw when looking at your page was:

 

SCRIPT5022: Exception thrown and not caught
MasterTrainer.js, line 74 character 4

 

From there it was pretty easy to find the trailing comma in that array.

 

(Also, I noticed sportsPerCircle was misspelled sportsPerCirlce a few times ;) )

  • Like 3
Link to comment
Share on other sites

Hi,

 

I don't know if I should whether laugh or cry... <_<

 

The whole problem with your site is CSS nothing else.

 

In the first section you have three circular elements, each one has a background circle. In IE8 those are not being loaded, this could happen because you're using the shorthand method and you're not adding the quotes marks in the url path:

element
{
    background:url(image/path/image.png);
}
/*TRY*/
element
{
    background-image:url('image/path/image.png');
} 

Also beware that you're animating the opacity of an element that has a transparent png inside, this could be the source of other problems (look around in the forums), perhaps use jpg files in IE8 and older. Finally you're using position:absolute, which causes the elements being on top of each others, you'll have to position them with the css or via code.

 

Then you have 5 columns animating upwards. Here you're using display:inline-block, which breaks in IE8 and older, replace it with display:inline and it should work.

 

Then you have three elements, they're correctly positioned but don't animate, here it'll help to isolate just that code in order to get a better look, but this can be what Jamie pointed out in the previous post.

 

Finally you have the contact element. Here you're using rgba and border-radius, but the main reason could be the following:

parallax.addTween(2500, TweenMax.fromTo($(".callout1 .cta"), 1,
{
    css:
    {
        left: -1000, opacity: 0
    }, immediateRender: true
},
{
    css:
    {
        left: ($(window).width() > 1400) ? 500 : 300,//this 
        opacity: 1
    }
}
), 0, 0, false);

I'm not sure if IE8 can understand that, perhaps store that in a variable and then pass the variable to the constructor, or maybe the issue Jaime mentioned is also breaking this.

 

Well nothing else left except tell you that I'm sorry for being so stubborn about Sitefinity.

 

Finally on second thought I think I'll laugh about it, its healthier :D

 

Best,

Rodrigo.

  • Like 4
Link to comment
Share on other sites

I have a feeling it will be line 90 of mastertrainer.js - remove the comma at the end of this line and see if that changes anything.

 

IE8 and below do not allow trailing commas in arrays. Esssentially undefined is added after the comma which will break your code 99% of the time. In IE8 your code is asking GSAP to append undefined to the TimeLine and of course it's not allowed. In other browsers the trailing comma is ignored which is why it is only breaking in IE8.

 

I recommend you get comfortable using the developer tools in IE. Press F12 to open them and swap to the console tab. The first thing I saw when looking at your page was:

 

SCRIPT5022: Exception thrown and not caught

MasterTrainer.js, line 74 character 4

 

From there it was pretty easy to find the trailing comma in that array.

 

(Also, I noticed sportsPerCircle was misspelled sportsPerCirlce a few times ;) )

Yeah, we already knew what the error message was--as stated before this isn't my code--I just posted as is--alot of misspelled words in that js file.  I will try removing the trailing comma and see if that works.  Thanks!

Link to comment
Share on other sites

Hi,

 

I don't know if I should whether laugh or cry... <_<

 

The whole problem with your site is CSS nothing else.

 

In the first section you have three circular elements, each one has a background circle. In IE8 those are not being loaded, this could happen because you're using the shorthand method and you're not adding the quotes marks in the url path:

element
{
    background:url(image/path/image.png);
}
/*TRY*/
element
{
    background-image:url('image/path/image.png');
} 

Also beware that you're animating the opacity of an element that has a transparent png inside, this could be the source of other problems (look around in the forums), perhaps use jpg files in IE8 and older. Finally you're using position:absolute, which causes the elements being on top of each others, you'll have to position them with the css or via code.

 

Then you have 5 columns animating upwards. Here you're using display:inline-block, which breaks in IE8 and older, replace it with display:inline and it should work.

 

Then you have three elements, they're correctly positioned but don't animate, here it'll help to isolate just that code in order to get a better look, but this can be what Jamie pointed out in the previous post.

 

Finally you have the contact element. Here you're using rgba and border-radius, but the main reason could be the following:

parallax.addTween(2500, TweenMax.fromTo($(".callout1 .cta"), 1,
{
    css:
    {
        left: -1000, opacity: 0
    }, immediateRender: true
},
{
    css:
    {
        left: ($(window).width() > 1400) ? 500 : 300,//this 
        opacity: 1
    }
}
), 0, 0, false);

I'm not sure if IE8 can understand that, perhaps store that in a variable and then pass the variable to the constructor, or maybe the issue Jaime mentioned is also breaking this.

 

Well nothing else left except tell you that I'm sorry for being so stubborn about Sitefinity.

 

Finally on second thought I think I'll laugh about it, its healthier :D

 

Best,

Rodrigo.

Thanks, I will take a look at that as well!  

Link to comment
Share on other sites

Actually it was the nth child in the css that was causing the issues--but one more small issue, and I think this is solved.  In chrome, the animation at the very bottom of the page isn't working--in every other browser it does, including IE8.  Any ideas?  

Link to comment
Share on other sites

hmmm.. as stated on page 1, i suggested it had to probably be something with :nth-child() since it is not supported in IE8.. :o

 

http://forums.greensock.com/topic/8308-compatible-with-ie8/?view=findpost&p=32207

 

Plus that lone comma that jamiejefferson had pointed out to you.

 

http://forums.greensock.com/topic/8308-compatible-with-ie8/?view=findpost&p=32269

 

for future reference... you can use this site to check browser compatibility:

 

http://caniuse.com/#search=%3Anth-child

http://caniuse.com/

 

also i believe IE8 would understand even when using GSAP or jQuery.. in your code

// you were or are using this
$(".stepInfographic .sf_colsIn.sf_2cols_1in_50 .sfContentBlock ul li:nth-child(5)");

// you could try this - the n is a formula that selects every 5th element
$(".sf_colsIn.sf_2cols_1in_50 .sfContentBlock ul li:nth-child(5n)");

// or just use eq instead
$(".sf_colsIn.sf_2cols_1in_50 .sfContentBlock ul li").eq(2);

You could try using jQuery eq() method instead of :nth-child()

 

Also just a side note.. if you can, you might want to reduce the length of your selector, so you dont have such a long selector rule when targeting elements.. an ID would be faster than a class.. http://jsperf.com/id-vs-class-selector-829892

 

But i am still curious since GSAP should be able to work with :nth-child() selectors, even though :nth-child() is not supported in IE8? so this is very weird!

I do know that sometimes IE8, when using jQuery, has issues with :nth-child(n),  but when you have the (NUMBERn) it tricks it into selecting every element of the number amount.. for example :nth-child(3n) .. this would work in IE8, maybe buggy in some builds.  ... so that is weird too..

that is why IE8 is the bane of my existence :P

 

As far as chrome issue...You might have to be more specific on what animation in chrome, since im not sure what animation at the bottom of the page your referring to? thx

Link to comment
Share on other sites

hmmm.. as stated on page 1, i suggested it had to probably be something with :nth-child() since it is not supported in IE8.. :o

 

http://forums.greensock.com/topic/8308-compatible-with-ie8/?view=findpost&p=32207

 

Plus that lone comma that jamiejefferson had pointed out to you.

 

http://forums.greensock.com/topic/8308-compatible-with-ie8/?view=findpost&p=32269

 

for future reference... you can use this site to check browser compatibility:

 

http://caniuse.com/#search=%3Anth-child

http://caniuse.com/

 

also i believe IE8 would understand even when using GSAP or jQuery.. in your code

// you were or are using this
$(".stepInfographic .sf_colsIn.sf_2cols_1in_50 .sfContentBlock ul li:nth-child(5)");

// you could try this - the n is a formula that selects every 5th element
$(".sf_colsIn.sf_2cols_1in_50 .sfContentBlock ul li:nth-child(5n)");

// or just use eq instead
$(".sf_colsIn.sf_2cols_1in_50 .sfContentBlock ul li").eq(2);

You could try using jQuery eq() method instead of :nth-child()

 

Also just a side note.. if you can, you might want to reduce the length of your selector, so you dont have such a long selector rule when targeting elements.. an ID would be faster than a class.. http://jsperf.com/id-vs-class-selector-829892

 

But i am still curious since GSAP should be able to work with :nth-child() selectors, even though :nth-child() is not supported in IE8? so this is very weird!

 

I do know that sometimes IE8, when using jQuery, has issues with :nth-child(n),  but when you have the (NUMBERn) it tricks it into selecting every element of the number amount.. for example :nth-child(3n) .. this would work in IE8.  ... so that is weird too..

 

that is why IE8 is the bane of my existence :P

 

As far as chrome issue...You might have to be more specific on what animation in chrome, since im not sure what animation at the bottom of the page your referring to? thx

With all due respect to your post, you were referring to the :nth-child selectors in the tween - not in the css.:)   I have left the :nth-child selectors alone in the tween which work fine.    If you look at the site in Firefox or IE, you will see the animation at the bottom. There is one above it exactly the same that works fine, so I am not sure why it is not working only in Chrome.  

Link to comment
Share on other sites

no worries.. what is the version of Chrome you are using?

 

do you have the latest version of Chrome installed.. updates?

 

what OS are you using?

 

i tested on PC Windows 7 , latest Chrome Version 29.0.1547.76 m

 

Im seeing the:

  • '5 level program' animate..
  • '3 tracks to choose from' boxes animate
  • 'to learn more' circle animates

so im not sure why its not animating unless some else can see what your seeing.. or those elements i saw animating at the bottom are not the elements you mean?

Link to comment
Share on other sites

also just a side note.. i noticed that your page does not declare a charset:

<meta charset="utf-8">

that would go right below the first starting head tag..

because chrome was throwing this error:

The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.

also it looks like another error due to missing image:

"NetworkError: 404 Not Found - http://bcdesignsit.com/clients/Images/dropShadow.png"

this might be unrelated, but it might be good to correct those issues.

 

you can find these same errors by using the code inspector in Chrome, or Firefox, as well as what Jamie had suggested about IE code inspector..

Link to comment
Share on other sites

no worries.. what is the version of Chrome you are using?

 

do you have the latest version of Chrome installed.. updates?

 

what OS are you using?

 

i tested on PC Windows 7 , latest Chrome Version 29.0.1547.76 m

 

Im seeing the:

  • '5 level program' animate..
  • '3 tracks to choose from' boxes animate
  • 'to learn more' circle animates

so im not sure why its not animating unless some else can see what your seeing.. or those elements i saw animating at the bottom are not the elements you mean?

I am using Chrome 29 and I have tried on my work computer, home computer and tablet.  Did the learn more circle animate twice for you?  It should animate over the woman of color plus the trainer working out with the guy.  Same animation...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...