IE 10/11 responsive keyframes bug solutions

[milosdjakonovic]

Here is best described bug and simple workaround.

Bottom line is: @keyframe rule defined inside media query will result in no animation on IE10/11, so users of jQuery Keyframes unaware of this bug will get nothing with

$.keyframe.define([{ name: 'roll-clockwise', media: '...anything with valid syntax'...

Since usage of this two browsers is significant, and I don't have info whether this bug is resolved in Edge browser or not, my opinion is that jQuery Keyframes should do something about this.

Do you agree?

If yes, which approach would you prefer more:

1.
to retain current $.keyframe.define api,

• detect IE10/11 by UA sniffing,
• detect if media field is used in keyframe definition,
• not append generated keyframe <style> tag to head when condition is found to be false (by using matchMedia().matches)
• queue previous mentioned generated keyframe <style> tag to be appended to head if condition becomes true after resize / orientationchange event

2.
redefine api that deals with responsive animation:
instead $.keyframe.define({media})

    $(selector).playKeyframe({
        name: 'trapdoor-sequence',
        minWidth: '920px',
        minHeight:'500px',
        orientation: 'landscape'
        ...

with same rules: nothing happen if conditions is false, action is queued for eventual later execution if condition becomes true after resize / orientationchange.

[milosdjakonovic]

of course, I'm interested to develop this :)

[krazyjakee]

Thanks for providing the link to the issue with examples. It's hard to believe this issue exists but yes, we certainly need to workaround this issue. Please feel free to develop it!

[milosdjakonovic]

Ok, even though I don't like UA sniffing much, I'll go with option 1. This issue is specific to two browsers and we should try to avoid changing of established API and functionality that works well on every other browser..

[milosdjakonovic]

@krazyjakee I think it's best to open new branch for this issue - let's call it ie1011fix - could you, if you agree?

It's better for me to publish changes step by step (commit by commit); I'll never have enough time to do all things at once...

[krazyjakee]

Yeah sure! I see no harm in that

[milosdjakonovic]

Hey Jake, I've added some changes and opened branch .

Here is the situation:
bug is fixed for, let's name it usual usage. That means:

$.keyframe.define([{
    name: 'roll-clockwise',
    media: 'screen and (max-width: 700px)',
    from: {
        'margin-left' : '0px'
    },
    to: {
        'margin-left' : '600px'
    }
    }
]);

will also work in ie 10 & 11. Problem solved.

But behavior in normal browsers includes realization of CSS animation when @media rule which contains related keyframe declaration becomes true. This does not happen with my patch.

Example:
in Chrome, FF, Opera, Safari... when you activate roll-clockwise (playKeyframe) and screen and (max-width: 700px) does not match, nothing happen until you resize (scale down) browser. Once when screen and (max-width: 700px) becomes true, animation is perfomed.
in IE 10 / 11, in described situation, after scale down animation is not performed.

My opinion is that this is less of a problem and development should continue with this patch applied to master and dist (since it solver most of a problem - it only leave with nothing users with ie10/11 after resize/orientationchange under some circumstances ).

You should inspect my changes and perform whatever tests you was performing in the past and decide whether to apply changes to master or not.

[milosdjakonovic]

also, I suggest that you accept micro optimizations that refers to variable scope. Scoping window, document, jQuery into local scope makes them local variables, which is best from performance aspect.

[milosdjakonovic]

hey @krazyjakee , what do you think about this changes?

[krazyjakee]

@milosdjakonovic sorry dude, I just started a new job and don't have time at the moment.

As long as the example is working in all browsers, that should be fine.

Thank you very much for your hard work on this!

[milosdjakonovic]

@krazyjakee Ok, than I will do thorough tests of all options in all major browsers (ie10/11,FF current, CHR current, Opera current, Android 4.3+, Safari 5.1+...) and, if everything performs ok everywhere I will merge ie1011fix to master and release 0.1

It will take few weeks, for sure, I'm too low on available time :)

[cleanboy]

Any updates on this? I'm not sure if its related but I am getting errors in IE and im pretty sure it is coming from the plugin and not my code and is to do with this...

[milosdjakonovic]

In order to find out whether this is related to your errors, take
https://raw.githubusercontent.com/Keyframes/jQuery.Keyframes/ie1011fix/jquery.keyframes.js
and try.

If your errors are gone, then yes it is related.

Regarding updates... seems to me that neither @krazyjakee nor me have time to work on new version, with this issue patched...

[krazyjakee]

The initial example now works in the latest version of edge so keyframes in media queries are apparently now supported.

@cleanboy can you set up an example on codepen or jsfiddle so we can recreate your issue?

[milosdjakonovic]

This issue is still very relevant, unfortunately, since all Edge browsers takes <1.5% share globally, compared to 4.6% IE10/11.

http://caniuse.com/#search=css-animation

Branch ie1011fix solves most of this problem, but doesn't provide full canonical behavior, as explained here.

[cleanboy]

thanks for this but I gave ie1011fix a try but was still getting the error...therefor i do not think this is related haha...

im not sure if its to do with the code I wrote but in IE (and only IE) I get the error "Unable to get property 'animationName' of undefined or null reference. It has to do with this line in the plugin:

return this.style[animationString + "Name"] === frameName; //line 122 in the ie1011fixx.js

If I comment it out it still works fine in chrome/firefox and I dont get errors in IE anymore...im still getting my head around how the whole plugin works so im not sure if thats going to cause issues in the future haha...

[milosdjakonovic]

ok, can we have a pen or fiddle with this issue reproduced?