I must confess that IE 11 is a reasonable browser. Microsoft has done some good work recently and has been quite active with the open web in the last couple of years. This page demonstrates their commitment to improving the IE experience.

Well, here's a bug to put a dampener on your festive spirits. If you ask me, the worst kind of bugs are for those properties or modules that a browser claims to support, but not entirely so. Thankfully, there's a simple workaround for this particular one, if your use case is simple. I decided to blog about it, just in case it helps save someone's time.

IE has supported CSS keyframe animations since IE 10. However, I recently discovered a bug in the latest version (IE 11), while working on implementing a responsive redesign of a fixed-width site. The designer requested an animation on one UI module only on wider screens. I would not consider this an unreasonable request.

Which let to my encounter with the IE bug. Took me a while to figure out what was going on. I filed a bug on the IE bug tracker here.

You can test the CodePen demo below in IE and other browsers. I've set a media query at min-width: 600px, inside which the animation lives. To cut a long story short, keyframe animations don't work inside media query blocks in any version of IE.

See the Pen bNwYmV by Karen Menezes (@imohkay) on CodePen.

How do we solve this issue? The fix is very simple. Simply move the keyframe block outside the media query block and leave the animation within the media query.

See the Pen KwgyjW by Karen Menezes (@imohkay) on CodePen.

Teaser image source here.