css - クロムの列数構成で壊れる歪んだ要素

Question

css プロパティ を使用して 3 列のコンテナが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) では、正しい期待どおりの結果が得られます。

(歪んだブロックが切り捨てられるのは別の問題のようで、現在は気にしていませんが、まだ注目に値する可能性があります)

これは chrome with のバグのようcolumn-countですが、これを機能させるための回避策はありますか?

編集: バージョン 53.0.2780.0 カナリアでこれをテストしたところ、機能したため、バグは将来的には既に修正されているようです。