Décalage des éléments en configuration de comptage de colonnes sur le chrome

Question

Étant donné un conteneur avec 3 colonnes utilisant la propriété css column-count, et chaque colonne est inclinée avec transform: skewX(-15deg), si j'applique une autre opération de décalage à l'intérieur des colonnes, à partir de la 2ème colonne, le les éléments affectés deviennent invisibles.

J'ai fait un petit exemple qui illustre le problème: https://jsfiddle.net/yvkeax2s/4/

.outer { 
    background-color: #aaffaa; 
    margin: 50px; 
    height: 200px; 
    width: 510px; 
    column-count: 3; 
    -moz-column-count: 3; 
    -webkit-column-count: 3; 
    column-count-gap: 20px; 
    -mozcolumn-count-gap: 20px; 
    -webkitcolumn-count-gap: 20px; 
} 

.inner { 
    display: inline-block; 
    width: 150px; 
    transform: skewX(-15deg); 
    background-color: #ff9999; 
    height: 100%; 
} 

.unskewed { 
    transform: skewX(15deg); 
} 

---

<div class="outer"> 
    <div class="inner"> 
    <div class="unskewed">skewed 1 <img src="http://placehold.it/40x20"></div> 
    raw text 1 <img src="http://placehold.it/40x20"> 
    </div> 
    <div class="inner"> 
    <div class="unskewed">skewed 2 <img src="http://placehold.it/40x20"></div> 
    raw text 2 <img src="http://placehold.it/40x20"> 
    </div> 
    <div class="inner"> 
    <div class="unskewed">skewed 3 <img src="http://placehold.it/40x20"></div> 
    raw text 3 <img src="http://placehold.it/40x20"> 
    </div> 
</div> 

sur Google Chrome (version 51.0.2704.103 m), je reçois le texte suivant:

Sur Firefox (47.0) je reçois le correct, exp résultat ète:

(Les blocs asymétriques se tronqués semble être un autre problème, que je actuellement ne se soucient pas, mais peut-être encore à noter)

Cela semble être un bug dans chrome avec column-count, mais existe-t-il une solution de contournement pour que cela fonctionne?

EDIT: J'ai testé cela sur la version 53.0.2780.0 canary, et cela a fonctionné, donc le bug semble déjà résolu pour le futur.

Answer 1

Vous pouvez le forcer à afficher en changeant la classe .text à ce qui suit:

.text { 
    transform: skewX(15deg) translateZ(0); 
} 

Mais avez-vous besoin d'utiliser la propriété de la colonne? Il est actuellement très expérimental, est plein de bugs et nécessite beaucoup de préfixes de navigateur, voir Can I use.

Ce que vous faites pourrait être réalisé de différentes manières sans utiliser la propriété column. Je l'ai modifié votre violon à travailler sans elle: https://jsfiddle.net/yvkeax2s/6/

.outer { 
    background-color: #aaffaa; 
    margin: 50px; 
    height: 200px; 
    width: 510px; 
} 

.inner { 
    float: left; 
    width: 150px; 
    transform: skewX(-15deg); 
    background-color: #ff9999; 
    height: 100%; 
    margin: 0 10px; 
} 

.text { 
    transform: skewX(15deg); 
}