Le style des colonnes CSS ne fonctionne que sur une seule colonne dans Chrome

Question

Je travaille sur un thème WordPress avec une grille de photos réactives. Essentiellement, c'est un conteneur div qui affiche ses éléments div enfants dans 3 colonnes. J'ai ajouté des effets de css hover sur chaque div plus petit. La grille de la photo s'affiche correctement sur Firefox, mais dans Chrome, seule la première colonne de divs s'affiche comme il se doit. Les images des deux autres colonnes ne s'affichent pas, mais elles clignotent lorsque survolées. Ci-dessous l'extrait de code you can open it in Codepen (vous devrez ouvrir un navigateur Chrome et un autre navigateur pour voir le problème).

/* Grid styling */ 
 
     .grid-outer::before, 
 
     .grid-outer::after{ 
 
      content:""; 
 
      background-color: transparent!important; 
 
     } 
 
     .grid-outer { 
 
      -webkit-column-count: 3; 
 
      /* Chrome, Safari, Opera */ 
 
      /* Firefox */ 
 
      column-count: 3; 
 
      -webkit-column-gap: 0px; 
 
      column-gap: 0px; 
 
      background-color: transparent!important; 
 
      opacity: 1; 
 
      overflow: hidden; 
 
      position: relative; 
 
      z-index: 500; 
 
     } 
 
     .grid-outer li { 
 
      width: 100%; 
 
      padding: 0px; 
 
     } 
 
     .grid-cell-container a{ 
 
      font-family: 'Oswald', sans-serif; 
 
      line-height: 1; 
 
      overflow: hidden; 
 
      width: 100%; 
 
      display: block; 
 
     } 
 
     .img-container { 
 
      overflow: hidden; 
 
      position: relative; 
 
      background-color:black; 
 
      -webkit-transition: all .3s ease-in-out; 
 
      transition: all .3s ease-in-out; 
 
      padding: 0px; 
 
      margin: 0px; 
 
     } 
 
     .img-container:hover { 
 
      overflow: hidden; 
 
     } 
 
     .post-title-link img { 
 
      -webkit-transition: all .3s ease-in-out; 
 
      transition: all .3s ease-in-out; 
 
      -webkit-filter: grayscale(100%); 
 
      /* Ch 23+, Saf 6.0+, BB 10.0+ */ 
 
      filter: grayscale(100%); 
 
      /* FF 35+ */ 
 
      width: 100%; 
 
      opacity:0.7; 
 
     } 
 
     .post-title-link:hover img { 
 
      webkit-filter: grayscale(0%); 
 
      /* Ch 23+, Saf 6.0+, BB 10.0+ */ 
 
      -webkit-filter: grayscale(0%); 
 
      filter: grayscale(0%); 
 
      /* FF 35+ */ 
 
      opacity:1; 
 
     } 
 
     .post-title-link .grid-title { 
 
      opacity:0; 
 
      display: block; 
 
      text-shadow: 2px 2px 15px black; 
 
      color: white; 
 
      padding: 10px 10px 10px 30px; 
 
      font-size: 150%; 
 
      text-align: right; 
 
      width: 70%; 
 
      position: absolute; 
 
      bottom: 10px; 
 
      opacity:1; 
 
      right:0px; 
 
      -webkit-transition: all .2s ease-in; 
 
      transition: all .2s ease-in; 
 
     }

<div class="grid-outer"> 
 
    <div class="grid-cell-container"> 
 
     <!-- Image --> 
 
     <div class="img-container"> 
 
      <a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" /> 
 
       <div class="grid-title">Togepi</div> 
 
      </a> 
 
     </div> 
 
    </div> 
 
    <div class="grid-cell-container"> 
 
     <!-- Image --> 
 
     <div class="img-container"> 
 
      <a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" /> 
 
       <div class="grid-title">Togepi</div> 
 
      </a> 
 
     </div> 
 
    </div> 
 
    <div class="grid-cell-container"> 
 
     <!-- Image --> 
 
     <div class="img-container"> 
 
      <a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" /> 
 
       <div class="grid-title">Togepi</div> 
 
      </a> 
 
     </div> 
 
    </div> 
 
    <div class="grid-cell-container"> 
 
     <!-- Image --> 
 
     <div class="img-container"> 
 
      <a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" /> 
 
       <div class="grid-title">Togepi</div> 
 
      </a> 
 
     </div> 
 
    </div> 
 
    <div class="grid-cell-container"> 
 
     <!-- Image --> 
 
     <div class="img-container"> 
 
      <a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" /> 
 
       <div class="grid-title">Togepi</div> 
 
      </a> 
 
     </div> 
 
    </div> 
 
    <div class="grid-cell-container"> 
 
     <!-- Image --> 
 
     <div class="img-container"> 
 
      <a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" /> 
 
       <div class="grid-title">Togepi</div> 
 
      </a> 
 
     </div> 
 
    </div> 
 
    <div class="grid-cell-container"> 
 
     <!-- Image --> 
 
     <div class="img-container"> 
 
      <a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" /> 
 
       <div class="grid-title">Togepi</div> 
 
      </a> 
 
     </div> 
 
    </div> 
 
    <div class="grid-cell-container"> 
 
     <!-- Image --> 
 
     <div class="img-container"> 
 
      <a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" /> 
 
       <div class="grid-title">Togepi</div> 
 
      </a> 
 
     </div> 
 
    </div> 
 
    <div class="grid-cell-container"> 
 
     <!-- Image --> 
 
     <div class="img-container"> 
 
      <a class="post-title-link" href="http://google.com" title="Lorem"> <img class="blur" src="https://pro-rankedboost.netdna-ssl.com/wp-content/uploads/2016/08/Togepi-Pokemon-Go.png" /> 
 
       <div class="grid-title">Togepi</div> 
 
      </a> 
 
     </div> 
 
    </div> 
 
    <!-- end of the loop --> 
 
</div> 
 
<!-- .grid-outer -->

Answer 1

Quelqu'un a mentionné here que ils ont réussi à résoudre ce problème en ajoutant transform: translateZ(0) à l'élément de grille pour permettre Hardw sont l'accélération, dans ce cas:

.grid-cell-container { 
    transform: translateZ(0) 
} 

Answer 2

J'ai trouvé une solution en modifiant les propriétés des colonnes à display: flex; en .grid-outer et en ajoutant %33.333 largeur .grid-cell-container

.grid-outer { 
    display: flex; 
    display: -ms-flex; 
    display: -webkit-flex; 
    flex-wrap: wrap; 
    opacity: 1; 
    overflow: hidden; 
    position: relative; 
    z-index: 500; 
} 
.grid-cell-container{ 
    width: 33.333%; 
} 

Vous pouvez même faire des images "sensibles" en ajoutant requêtes de médias comme ceci:

@media all and (max-width: 480px){ 
    .grid-cell-container{ 
     width: 100%; 
    } 
} 

Si vous voulez faire vraiment 100% réactif je vous recommande de jouer avec des attributs flex comme flex-direction, justify-content, align-items, etc

Si vous voulez savoir pourquoi votre code ne fonctionnait pas, eh bien ... je lisais et je trouvé quelques bugs rapports sur Chrome et filter:grayscale(), je pense en utilisant filter + column-count est le bug d'un Chrome parce que si vous supprimez simplement column-count et -webkit-column-count dans votre code toutes les images fonctionneront et le vol stationnaire n'aurez aucun problème

Answer 3

Ajout transform: translateZ(0) au conteneur de grille fixe elle. Apparemment, il enables hardware acceleration.

.grid-cell-container { 
    transform: translateZ(0) 
} 

Suppression filter: grayscale(100%); sur les images aussi résolu le problème.

Merci pour l'aide! J'espère que Chrome résout ce bug.