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

Question

给定一个使用 css 属性的具有 3 列的容器column-count，并且每列都倾斜transform: skewX(-15deg)，如果我在列内应用另一个倾斜操作，从第二列开始，受影响的元素将变得不可见。

我做了一个小例子来说明这个问题： 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) 上，我得到了正确的预期结果：

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

这似乎是 chrome with 中的一个错误column-count，但是是否有解决方法可以使其正常工作？

编辑：我在版本 53.0.2780.0 canary 上对此进行了测试，并且它有效，因此该错误似乎已经为将来修复。

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);
}