Skewing elements breaking in column-count configuration on chrome

Question

Given a container with 3 columns using the css property column-count, and each column is skewed with transform: skewX(-15deg), if I apply another skew operation inside of the columns, starting from the 2nd column the affected elements become invisible.

I made a little example illustrating the problem: 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>

On Google chrome (Version 51.0.2704.103 m), I get the following:

On Firefox (47.0) I get the correct, expected result:

(The skewed blocks getting truncated seems to be another problem, which I currently don't care about, but might still be noteworthy)

This seems to be a bug in chrome with column-count, but is there a workaround to get this to work?

EDIT: I tested this on Version 53.0.2780.0 canary, and it worked, so the bug seems already fixed for the future.

Answer 1

You can force it to display by changing the .text class to the following:

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

But do you need to use the column property? It's currently highly experimental, is full of bugs and requires a lot of browser prefixes, see Can I use.

What you are doing could be achieved in a number of different ways without using the column property. I have modified your fiddle to work without it: 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);
}