chrome 的列数配置中的倾斜元素

Question

给定一个包含 3 列的容器，使用 css 属性 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 和 column-count 中的一个错误，但是否有解决方法可以让它工作？

编辑：我在 53.0.2780.0 版 canary 上测试过它，它有效，所以这个错误似乎已经在未来修复了。

Answer 1

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

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

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

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

chrome 的列数配置中的倾斜元素

Skewing elements breaking in column-count configuration on chrome

css

google-chrome

skew

css-transforms

column-count