Переход псевдоэлементов на IE 11 игнорирует прокладку

Question

Попытка сделать эффект наведения кнопки Я наткнулся на эту странную ошибку в IE.

Это происходит даже в IE11.

Когда вы наводите курсор на кнопку, псевдоэлементы «прыгают» на свой переход. Если вы удалите прокладку, она останавливается!

Я пытался обойти это весь день, но я не могу найти проблему.

Вот демо: http://codepen.io/anon/pen/rVwRKL

HTML 
<a href="http://##" title="yeah">Live Button</a> 

CSS 
body 
{ 
    padding: 5em; 
    margin: 0; 
} 

a{ 
    padding: 1em 1em; 
    margin: 0; 
    box-shadow: inset 0px 0px 0px 3px blue; 
    position: relative; 
    box-sizing: border-box; 
    display: inline-block; 
} 

a::before, 
a::after 
{ 
    transition: width 0.4s ease, height 0.4s ease 0.4s, opacity 0.4s ease; 
    content: " "; 
    box-sizing: border-box; 
    width: 100%; 
    height: 100%; 
    display: block; 
    position: absolute; 
    border: solid 3px green; 
    display: inline-block; 
} 

a::after 
{ 
    right: 0; 
    bottom: 0; 
    border-right-color: transparent; 
    border-top-color: transparent; 
} 

a::before 
{ 
    left: 0; 
    top: 0; 
    border-left-color: transparent; 
    border-bottom-color: transparent; 
} 

a:hover::before, 
a:hover::after 
{ 
    transition-delay: 0.4s, 0s, 0.7s; 
    width: 0; 
    height: 0; 
    opacity: 0; 
} 

Спасибо!

Answer 1

Не уверен, если вы когда-нибудь получили ответ на этот Марлон, но я просто столкнулся с той же проблемой с IE. К счастью, мне удалось выяснить странность в IE, которая вызывает проблему.

Это, кажется, когда вы смешиваете ваши префиксы измерения, т.е. ПВ,%, эм, оч.сл. и т.д ...

В моем вопросе я собирался с на VW пикс - это работает мелкий везде, кроме IE. Как только я сменил vw на px все было в порядке.

В вашем примере выше это было еще менее очевидно. У вас есть до/после установленного значения до 100% -% от измерения. Затем, в состоянии зависания, вы оба установили значение 0 (ноль) без измерения. Здесь проблема заключается в том, что никакие измерения не то же самое как%, который, по-видимому, IE пытается выяснить (?!?!?!). Как только вы добавите% к ширине/высоте в режиме зависания, он отлично работает.

См работает пример здесь с исправленной ширина/высота: http://codepen.io/anon/pen/YyNWzw

Предыдущий CSS

a:hover::before, 
a:hover::after 
{ 
    transition-delay: 0.4s, 0s, 0.7s; 
    width: 0; 
    height: 0; 
    opacity: 0; 
} 

Скорректированная CSS

a:hover::before, 
a:hover::after 
{ 
    transition-delay: 0.4s, 0s, 0.7s; 
    width: 0%; 
    height: 0%; 
    opacity: 0; 
} 

Как правило, я бы тоже никогда не удосужились добавления измерение, когда значение равно 0 (ноль), но я гу ess, если вы используете переходы, то IE требует от него соответствия.

Надеюсь, это поможет.