Jump to content
Search Community

IE8 Animation NOT working at all

Raymall Pérez 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

Hi all!

I need help with this, I have tested in Chrome, Safari, Firefox, and IE9+ and works magically.
But when I tested in IE8 specifically, the animation breaks. I have tried everything I could came up with but I'm stocked.

Demo Link: 
http://theoremcreations.com/undertone/16002/ss/demo/

CodePen Link:

See the Pen lnIHg by anon (@anon) on CodePen

Animation_Demo.zip

Link to comment
Share on other sites

Hello raymallperez, and Welcome to the GreenSock Forum!

 

When i downloaded your zip to test.. I noticed you are using an old version of GSAP JS - beta 1.8.0

 

Here is the latest version of GSAP at the time of this writing, 1.13.1 pulled from CDN

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js"></script>

For the new version of GSAP you can convert insert() method to add() method.

 

I had some questions to clear some things up:

  • Are you talking about real standalone IE8? ..
  • Or are you talking about IE10 - IE11 Document Mode that fakes rendering of IE8, which is not an exact rendering of IE8?
  • Also what exactly is breaking, because when i use the mouse wheel and scroll down the image of the phone rotates?

NOTE that if viewing your codepen demo in codepen in IE8 you will have to view it in FULL MODE to see it run.

 

Does that help? :)

  • Like 1
Link to comment
Share on other sites

I didn't have time to do extensive testing, but it looks like your particular scenario is an absolute nightmare for IE8. You're running into a bunch of rendering problems in that browser. For example, you're using a PNG with transparency, but in order for IE8 to render those correctly with filters (which are essential to do transforms), you can apply this IE8-only fix:

var i;
for (i in document.images) {
    if (document.images[i].src) {
        var imgSrc = document.images[i].src;
        if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
            document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
        }
    }
}

But that only solves the funky black edges. The way you set up your css and containers is causing more problems in IE related to clipping and...well...I'm just not super optimistic about you being able to pull it off in such an ancient, crippled browser quite frankly. I think you have two options:

  1. Convince your client to give up IE8 support, citing the fact that almost nobody uses it anymore and the cost of supporting it is astronomical both in terms of your hours and having to sacrifice creativity (certain effects are simply impossible). Not even Microsoft itself supports IE8 anymore. 
  2. Spend a lot of time restructuring your HTML and CSS to try to work around the various rendering issues in IE8. It may ultimately be impossible, but with enough man hours you can usually find some way to at least fake most of it. 

Obviously I'd strongly recommend #1. :)

  • Like 1
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...