Question

看看这个CodePen，看看我的意思：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我有一个带有透视的旋转元素，在其中我有一个＆＃39;滚动＆＃39;垂直转换的div（想象一下每页内部滚动div的杂志翻页体验）。我将will-change: transform添加到内部div并破坏了外部容器overflow: hidden。这似乎是Chrome合成器的一个错误。

有没有人知道任何变通办法？我想保留will-change属性，因为它可以显着提高移动Chrome上的动画效果。

编辑：看起来这不是特定于will-change属性，而是任何使内部div成为自己的合成层的属性。当我删除will-change属性但将转换更改为translate3d时，同样可以提高性能并显示错误。内部div上唯一允许旋转父级正确渲染overflow: hidden的类是添加2D变换的类。

Chrome CSS错误：＆＃34; translate3d＆＃34;旋转元素内部不服从＆＃34;溢出：隐藏＆＃34;

0 个答案: