xoogu

Recently I’ve been working on a widget that makes use of this hack using animation events as an alternative to DOM Mutation events. The nice thing about this method is that it lets you add the event listener on the element you want to get the ‘node inserted’ event for. Whereas with DOM mutation events, you must add the listener to the parent node. In cases where you don’t know where the node will be inserted, this means attaching the mutation listener to the body, and you have to filter all mutation events to try and find the one for your element. With the animation event method you don’t have that problem.

Anyway, to get on to the main point of this post, I was having a big problem with my widget working fine in all browsers (that support CSS3 animations) apart from MS Edge. It seemed very strange that something working in older IEs would not work in Edge. The problem was that the animation event was never being fired when the node was inserted. But when I tried the jsFiddle example from the backalleycoder post, that worked fine in Edge.

After much debugging, I found the issue. I had my keyframes like this:

@keyframes nodeInserted {
    from {  
        outline-color: #000; 
    }
    to {  
        outline-color: #111;
    } 
}
@-moz-keyframes nodeInserted {  
}
@-webkit-keyframes nodeInserted { 
    from {  
        outline-color: initial; 
    }
    to {  
        outline-color: initial;
    }  
}

@-ms-keyframes nodeInserted {
    from {  
        outline-color: #000; 
    }
    to {  
        outline-color: #111;
    } 
}

@-o-keyframes nodeInserted {  
    from {  
        outline-color: #fff; 
    }
    to {  
        outline-color: #000;
    }  
}

Initially I had the unprefixed @keyframes empty, but when playing with the jsFiddle example I found MS Edge didn’t like an empty @keyframes, nor did it like @keyframes changing the values from initial to initial. The problem with my CSS was that after defining the unprefixed @keyframes in a format Edge will fire an animation event for, I then have a webkit prefixed @keyframes using the initial values it doesn’t like.

MS Edge was picking up the webkit prefixed @keyframes, and using this as the value, since it comes later in the stylesheet than the unprefixed version. So the solution was simply to move the unprefixed @keyframes down to the bottom.

It seems a bit silly that MS Edge will pick up the webkit prefixed declaration, but doesn’t pick up the later ms prefixed declaration. But I guess that’s the kind of weirdness you come to expect from MS.

This foxed me for quite a while, so I hope this helps anyone else coming across the same problem.