css - Chrome CSS のバグ: 回転した要素内の「translate3d」が「overflow: hidden」に従わない

Question

このCodePenを見て、私が何を意味するかを確認してください。

.perspective-container {
  margin: 50px 0;
  perspective: 1000px;
  perspective-origin: 0 50%;
}
.card {
  border: 10px solid blue;
  width: 300px;
  height: 300px;
  overflow: hidden;
  transform: rotateY(-45deg);
}
.card-inner {
  width: 300px;
  height: 300px;
  overflow: hidden;
}
.scroller {
  transform: translate(0, -100px);
}
.scroller-3d {
  transform: translate3d(0, -100px, 0);
}
.will-change {
  will-change: transform;
}

<h1>Incorrect (uses will-change):</h1>
<div class="perspective-container">
  <div class="card"><div class="card-inner">
    <div class="scroll-container">
      <div class="scroller will-change">
        <img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
      </div>
    </div>
  </div></div>
</div>
<h1>Incorrect (uses translate3d):</h1>
<div class="perspective-container">
  <div class="card">
    <div class="scroll-container">
      <div class="scroller-3d">
        <img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
      </div>
    </div>
  </div>
</div>
<h1>Correct (uses neither translate3d or will-change):</h1>
<div class="perspective-container">
  <div class="card">
    <div class="scroll-container">
      <div class="scroller">
        <img src="https://images2.pixlis.com/background-image-horizontal-lines-and-stripes-seamless-tileable-grey-black-22hnju.png" />
      </div>
    </div>
  </div>
</div>

パースペクティブが適用された回転要素があり、その中には垂直方向に変換される「スクロール」div があります (各ページ内で div をスクロールする雑誌のページめくり体験を想像してください)。will-change: transform内側の divに追加したところ、外側のコンテナーが壊れましたoverflow: hidden。これは Chrome コンポジターのバグのようです。

誰かが回避策を知っていますか? will-changeモバイル Chrome でのアニメーションが大幅に高速化されるため、この属性を保持したいと考えています。

編集:これは will-change プロパティに固有のものではなく、内側の div を独自の合成レイヤーにするプロパティに固有のもののようです。プロパティを削除しwill-changeて変換を に変更するとtranslate3d、同様にパフォーマンスが向上し、バグが発生します。回転した親を正しくレンダリングできるようにする内部 div の唯一のクラスoverflow: hiddenは、2D 変換を追加するクラスです。