Width transitions: after a pseudo-element not working in Edge

Question

I use CSS transitions in a pseudo element ::afterand it works fine in Chrome and Firefox; however, it does not work properly in Edge. The transition to the background color works on a pseudo-element, but there is no width.

Here is my current code: http://codepen.io/anon/pen/ZbYKwv?editors=110

In order to clearly see the transition, I increased the duration from 400 ms to 4000 ms. I also added a white background to <label>, because Edge does not work to support the SVG URI of data for the background image (I actually use the file, but I cannot upload it to CodePen).

So what can I do to make the pseudo-element width animate as expected on Edge?

Answer 1

Try adding prefixes for all browsers in the transition rule:

-webkit-transition: all 4000ms ease;
-moz-transition: all 4000ms ease;
-ms-transition: all 4000ms ease;
-o-transition: all 4000ms ease;
transition: all 4000ms ease;

This should go to work in every browser.

In addition, you can try to specify a value widthfor the navigator, if checked #nav-toggle, even if it is the same value as for .nav.

IE and FF often have problems with transitions with maximum width / height.