倾斜元素在chrome上的列数配置中断

Question

给定一个包含3列的容器使用css属性column-count，并且每列都倾斜transform: skewX(-15deg)，如果我在列中应用另一个倾斜操作，从第2列开始受影响的元素变得无形。

我举了一个例子来说明问题： 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>

在Google Chrome（版本51.0.2704.103 m）上，我得到以下内容：

在Firefox（47.0）上，我得到了正确的预期结果：

（被截断的块被截断似乎是另一个问题，我目前不关心，但可能仍然值得注意）

这似乎是使用column-count的Chrome中的一个错误，但是有一种解决方法可以让它工作吗？

编辑：我在53.0.2780.0版本的金丝雀上测试了它，并且它有效，所以这个错误似乎已经修复了。

Answer 1

您可以通过将.text类更改为以下内容来强制显示它：

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

但是你需要使用列属性吗？它目前是高度实验性的，充满了错误，需要大量的浏览器前缀，请参阅Can I use。

在不使用column属性的情况下，您可以通过多种不同方式实现所做的工作。我已经修改了你的小提琴而没有它：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);
}