Wednesday 11 January 2017

IE and Scroll Magic not working

I'm rebuilding my website as I need to update it with a new one page look. Extensive use of Scrollmagic as well as Greensock GSAP and PixiJS, not to mention custom use of Pixi with Flump to create traditional cell frame animations.
So,  Scrollmagic works across all platforms and latest browsers? Apparently not without some help from the HTML - which is easily missed. Ostensibly a link to the JS in the example code seems simple enough, yet the missing code gave me some serious grief.
I use a Macbook and the usual setup - AdobeCS, hand coding with Coda Panic and a range of test environments, including the usual browsers on my Mac as well as Parallels with various versions of Windows - that have Chrome, FF and Explorer installed.
Parallels is generally great, although with lots of screens running it can slow quite a bit, and my machine is top of the range.
Que the page dropped into IE. Doesn't work. It works in every other browser and works perfectly. Generally Im using JS to handle the viewport changes rather than trying to reply on CSS and vw, vh.
So I start there, trying to re-arrange the JS. Then I start pairing down the HTML. Then I check the working examples, that are greatly simplified. I discover these work and then go back to look at the HTML again. Eventually I realise that the code is not working - only in IE because the meta for the http-eqiv is missing,

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Put it back in and it works just fine!

2 comments:

  1. Should we be placing the http-equiv ie in all our html5 pages?

    ReplyDelete
    Replies
    1. Is that you Richie? I don't know with your particular case, but Id guess so. It would need to go in a template if you are using something like wordpress etc...

      Delete