@keyframe not working in IE10

[ethangodt]

I'm noticing an issue with the animation features of aphrodite, and IE10 (have confirmed that it works in IE11, and all modern browsers).

Essentially, it seems like the @keyframe declarations aren't being picked up by IE10 when inlined by aphrodite. For example, if I log the output of the injectStyleTag() and use the generated animation declaration to manually set it inline in the html (i.e. not use aphrodite), it works fine (example below). If I let aphrodite do it, it does not work.

// This works:

<style type="text/css">
        @keyframes keyframe_jj70bv{
            0% {
                opacity:0;
                -webkit-transform:translate3d(0, 2000px, 0);
                -ms-transform:translate3d(0, 2000px, 0);
                transform:translate3d(0, 2000px, 0);
            }
            100% {
                opacity:1;
                -webkit-transform:none;
                -ms-transform:none;
                transform:none;
            }
        }

        .slideUp_1odhk6h{
            -webkit-animation-name: keyframe_jj70bv;
            animation-name: keyframe_jj70bv;
        }
</style>

Some thoughts: I'm checking to see if it's a problem with adding @keyframe after initial page load, or if it's an issue with how it's minified.

Unfortunately, haven't had more time to debug issue. Let me know if there is any more information I can provide.

[niksajanjic]

I can't say I know what your issue is, but I remember when I was adding elements to the page dynamically through jQuery which also had CSS animations I used to have problems with IE10. It ended up being a problem of adding dynamically created elements to the page with animations. So if you're using some framework like React or Angular all HTML is added to the page through JS.

I fixed that problem by adding this line into my head tag:

<meta http-equiv="X-UA-Compatible" content="IE=9;IE=10;IE=Edge,chrome=1"/>

This is the only thing that comes to my mind, although I don't give high hopes this would solve your problem. For more info what that line does:

http://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do

[ethangodt]

@niksajanjic thanks for the reply. Will give it a try and relay what I find.

[ethangodt]

Update: the meta tag didn't work. Is anyone else having issues with this? IE 10 is not an incredibly old browser, and it's fairly inconvenient that we must run less files for our animations, when we use aphrodite for most everything else.

[lencioni]

I wonder if this is the same issue that @reklawnos reported here: https://github.com/Khan/aphrodite/pull/238

@ethangodt can you try the fix in that PR and see if it resolves this?