Ширина переходов на:: после псевдоэлемента не работает в Edge

Question

Я использую CSS переходы на ::after псевдоэлемент, и он отлично работает в Chrome и Firefox; однако, это не работает, как ожидалось в Edge. Переход цвета фона работает на псевдоэлементе, а ширина - нет.

Вот мой текущий код: http://codepen.io/anon/pen/ZbYKwv?editors=110

Чтобы ясно видеть переход, я увеличил продолжительность с 400 мс до 4000 мс. Я также добавил белый фон <label> потому что Edge не сшивается для поддержки URI данных SVG для фонового изображения (на самом деле я использую файл, но не могу загрузить его в CodePen).

Итак, что я могу сделать, чтобы оживить ширину псевдоэлемента, как и ожидалось в Edge?

Answer 1

Попробуйте добавить префиксы для всех браузеров в правиле перехода:

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

Этот переход должен работать на каждом браузере.

Кроме того, вы можете попытаться указать width значение для навигации, когда #nav-toggle проверяется, даже если это то же значение, что и для .nav,

IE и FF часто имеют проблемы с переходами с max-width/height.