Jump to content
Search Community

bcaz

Members

  • Posts

    22

  • Joined

  • Last visited

 Content Type 

Posts posted by bcaz

    Loading slow in Firefox and IE

    in GSAP

    Posted

    Hi all--Want to first thank everyone for helping me on this current project. (previous thread) This is our site: http://bit.ly/1g1ulWV  When you open the site in Chrome, the Greensock scripts load fast and everything works as it should.  However, in Firefox and IE10, it takes FOREVER to load, and the animation is all skewed until it does load.  Anyone have any ideas?  Thanks.

    Compatible with ie8?

    in GSAP

    Posted

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

    Compatible with ie8?

    in GSAP

    Posted

    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.  

    Compatible with ie8?

    in GSAP

    Posted

    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?  

    Compatible with ie8?

    in GSAP

    Posted

    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!  

    Compatible with ie8?

    in GSAP

    Posted

    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!

    Compatible with ie8?

    in GSAP

    Posted

    i dont know this will help but in the MasterTrainer.js is using a window load event..

     

    for IE8 its best to use :

    window.load = function(){
    // code would go here
};

    I dont know if that would help .. but you could test if you still get that error with the above window.load..

     

    Im not sure, but maybe IE8 is not firing the window load event properly since it does have issues with the jQuery window object $(window). I have had issues with IE8 not loading the assets right and them being ready to use

     

    Also you could add a DOM ready event handler around the window.load so your also checking when the DOM is ready

    $(document).ready(){
     window.load = function(){
        // code would go here
     };
});

    Just a thought .. do some tests and see if using the window.load event and the DOM ready help in your tests in IE8..

     

    this way you can see if that might be causing any issues..

    I will try this!  Thanks!

    Compatible with ie8?

    in GSAP

    Posted

    Well that's a very good reason to contact them, specially if you're paying for a service. That's customer service 101.

     

    Yes that is expected, but not because it has something to do with GSAP, but because you're removing the code that's being broken.

     

    The error reported by IE8 comes from this particular piece of code in TweenMax.js:

    p.add = function(value, position, align, stagger)
{
    var curTime, l, i, child, tl, beforeRawTime;
if (typeof(position) !== "number")
    {
	position = this._parseTimeOrLabel(position, 0, true, value);
    }
    if (!(value instanceof Animation))
    {
	if (value instanceof Array)
        {
	    align = align || "normal";
	    stagger = stagger || 0;
	    curTime = position;
	    l = value.length;
	    for (i = 0; i < l; i++)
            {
		if ((child = value[i]) instanceof Array)
                {
		    child = new TimelineLite({tweens:child});
		}
		this.add(child, curTime);
		if (typeof(child) !== "string" && typeof(child) !== "function")
                {
		    if (align === "sequence")
                    {
		    	curTime = child._startTime + (child.totalDuration() / child._timeScale);
		    } else if (align === "start")
                    {
			child._startTime -= child.delay();
		    }
		}
		curTime += stagger;
	    }
	    return this._uncache(true);
	} else if (typeof(value) === "string")
        {
	    return this.addLabel(value, position);
	} else if (typeof(value) === "function") 
        {
	    value = TweenLite.delayedCall(0, value);
	} else 
        {
	    throw("Cannot add " + value + " into the timeline; it is not a tween, timeline, function, or string.");
	}
    }

    AS you can see this is basically the add method, I'm not going into further details because is outside the scope of this post. In your code all the add methods are handled by superscrollorama via addTween. What the error is indicating is that the code is trying to add something to the timeline that is not supported by GSAP , so to speak.

     

    Since this happens only in IE8 it has to be something done by stiefinity to secure compatibility with IE8 and older.

     

    If you isolate the code of mastertrainer.js and create a simple webpage the old-fashion way you'll see that the code works in IE8, if you check superscrollorama's home page in IE8 you'll see that it works:

     

    http://johnpolacek.github.io/superscrollorama/

     

    As you can see this is not a GSAP related issue, the engine works in IE8 even considering the fact that is probably one of the worst browsers ever and there are a lot of posts in the forums regarding issues with it. Also I always work with fallback scripts for IE8 and older and I stay away, as much as possible, from rotations and scales, which is the case of your code. That's why since my second reply I've stated that the issue is not GSAP related. You should definitely contact Sitefinity.

     

    Best,

    Rodrigo.

    Thanks for you help.  It's kinda of a complicated situation--which I won't go into - but I really do appreciate your help and will look into this further.  Thanks!

    Compatible with ie8?

    in GSAP

    Posted

    Nope not using Magento that I know of...

    i am unsure what it is  .. but when i inspect the script it shows that it is  'FetchBack Pixel Loader' .. looks like some marketing or tracking script.

     

    I tried googling it and did not see anything about it.. looks like this company owns that script.. http://www.ebayenterprise.com/marketing_solutions/display_retargeting/ ... so i followed it to ebayenterprise.com  ... and looks like ebayenterprise.com was formally GSI (GSI Commerce Solutions) .. which was bought by ebay...

     

    so my question is .. is your site using Magento or anything from x.com?

     

    looks like that iframe is getting inserted in the head instead of the body... that might be causing some issue in IE8 but ,, i would still check out what is being added to the timelines that might be causing an issue in IE8

×
×
  • Create New...