Bug webkit sur les éléments animés dans column

by oilvier

HTML

<div class="col">
    <span class="animated anim-rotate"></span>
    <span class="animated anim-rotate"></span>
    <span class="animated anim-rotate"></span>
    <span class="animated anim-rotate"></span>
    <span class="animated anim-rotate"></span>
    <span class="animated anim-rotate"></span>
</div>

<ul class="col">
    <li><span class="animated anim-rotate"></span></li>
    <li><span class="animated anim-rotate"></span></li>
    <li><span class="animated anim-rotate"></span></li>
    <li><span class="animated anim-rotate"></span></li>
    <li><span class="animated anim-rotate"></span></li>
    <li><span class="animated anim-rotate"></span></li>
</ul>

CSS

* {padding:0; margin:0;}
body {padding:10px;}
li {list-style:none;}

/* Gestion des colonnes */
.col {
    -moz-column-count:3; 
    -webkit-column-count:3; 
    column-count: 3; 
    -moz-column-gap:20px; 
    -webkit-column-gap:20px; 
    column-gap:20px; 
    -moz-column-rule: 1px dashed #c4c8cc; 
    -webkit-column-rule: 1px dashed #c4c8cc; 
    column-rule: 1px dashed #c4c8cc;
}
    span {display:block; margin:0 auto 10px; width: 50px; height: 50px; padding:5px; background:firebrick;}

/* Animation */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes rotate {
  100% {
   -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.anim-rotate:hover {
  -webkit-animation-name: rotate;
  animation-name: rotate;
}

JavaScript

/* Joli bug sur les navigateurs basés sur Webkit
 * Seuls les éléments dans la première colonne d'un élément avec `column-count`peuvent être animés.
 * Les éléments dans les colonnes suivantes subissent un énorme bug d'affichage (cf exemple - au survol)
 * https://code.google.com/p/chromium/issues/detail?id=177556
**/