фликера при анимации меню гамбургера на WebKit

Question

Я анимировать меню гамбургера, изменяющие margin и width два дивы (с переходом), и в то же время, гамбургера значок это анимированное переключение класса is-active.

В результате, как вы можете видеть, это мерцание эффект в содержании меню гамбургер (зеленый область): http://www.codeply.com/go/g7Zp98paz5

Исполнительное кнопку гамбургер: вы можете видеть, что для некоторые милисекунды, зеленый площадь исчезает. Выполнение кнопки переключения: вы можете видеть, что переходов нет.

Я только воспроизвожу его в Google Chrome.

Что происходит? Как я могу исправить это странное поведение?

Я использую этот LIB: https://github.com/callmenick/Animating-Hamburger-Icons

Answer 1

Это, кажется, что-то делать с поворотами; комментируя их делает переход работать корректно:

/* active state, i.e. menu open */ 
.c-hamburger--htx.is-active span { 
    background: none; 
} 

.c-hamburger--htx.is-active span::before { 
    top: 0; 
    /*transform: rotate(45deg);*/ 
} 

.c-hamburger--htx.is-active span::after { 
    bottom: 0; 
/* transform: rotate(-45deg);*/ 
}