Flicker lors de l'animation d'un menu hamburger sur WebKit

Question

J'animer un menu hamburger changeant la margin et width de deux divs (avec transition), et dans l'intervalle, une icône de hamburger il est animé de commutation de la classe is-active.

Le résultat, comme vous pouvez le voir, est un effet de scintillement dans le contenu du menu burger (le espace vert): http://www.codeply.com/go/g7Zp98paz5

exécution sur le bouton burger: vous pouvez voir que, pour quelques millisecondes, le vert disparaît. Exécution du bouton à bascule: vous pouvez voir qu'il n'y a pas de sauts.

Je ne fais que le reproduire dans Google Chrome.

Que se passe-t-il? Comment puis-je réparer ce comportement étrange?

J'utilise cette lib: https://github.com/callmenick/Animating-Hamburger-Icons

Answer 1

Il semble être quelque chose à voir avec les rotations; commentant-les rend le travail de transition correctement:

/* 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);*/ 
}