Chrome CSS 错误:"translate3d" 在旋转元素内不服从 "overflow: hidden"
Chrome CSS bug: "translate3d" inside a rotated element does not obey "overflow: hidden"
看看这个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>
我有一个应用了透视的旋转元素,其中我有一个垂直变换的 'scrolling' div(想象一下滚动 divs 的杂志翻页体验每页内)。我将 will-change: transform
添加到内部 div 并且破坏了外部容器 overflow: hidden
。这似乎是 Chrome 合成器的错误。
有人知道任何解决方法吗?我想保留 will-change
属性,因为它可以显着加快移动设备上的动画速度 Chrome。
编辑: 看起来这不是特定于 will-change 属性 而是任何 属性 使得内部 div它自己的合成层。当我删除 will-change
属性 但将转换更改为 translate3d
时,同样可以提高性能并显示错误。内部 div 上唯一允许旋转父对象正确呈现 overflow: hidden
的 class 是添加 2D 变换的对象。
试试这个 CodePen:
.container {
margin: 75px 0;
}
.card {
border: 10px solid blue;
width: 300px;
height: 300px;
overflow: hidden;
-webkit-transform: perspective(1000px) rotateY(-45deg);
transform: perspective(1000px) rotateY(-45deg);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.scroller {
-webkit-transform: translate(0, -100px);
transform: translate(0, -100px);
}
.scroller-3d {
-webkit-transform: translate3d(0, -100px, 0);
transform: translate3d(0, -100px, 0);
}
.will-change {
will-change: transform;
}
<h1>Uses will-change:</h1>
<div class="container">
<div class="card">
<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>
<h1>Uses translate3d:</h1>
<div class="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>Uses neither translate3d or will-change:</h1>
<div class="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>
您可以使用 perspective()
和 transform-origin
值。
看看这个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>
我有一个应用了透视的旋转元素,其中我有一个垂直变换的 'scrolling' div(想象一下滚动 divs 的杂志翻页体验每页内)。我将 will-change: transform
添加到内部 div 并且破坏了外部容器 overflow: hidden
。这似乎是 Chrome 合成器的错误。
有人知道任何解决方法吗?我想保留 will-change
属性,因为它可以显着加快移动设备上的动画速度 Chrome。
编辑: 看起来这不是特定于 will-change 属性 而是任何 属性 使得内部 div它自己的合成层。当我删除 will-change
属性 但将转换更改为 translate3d
时,同样可以提高性能并显示错误。内部 div 上唯一允许旋转父对象正确呈现 overflow: hidden
的 class 是添加 2D 变换的对象。
试试这个 CodePen:
.container {
margin: 75px 0;
}
.card {
border: 10px solid blue;
width: 300px;
height: 300px;
overflow: hidden;
-webkit-transform: perspective(1000px) rotateY(-45deg);
transform: perspective(1000px) rotateY(-45deg);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.scroller {
-webkit-transform: translate(0, -100px);
transform: translate(0, -100px);
}
.scroller-3d {
-webkit-transform: translate3d(0, -100px, 0);
transform: translate3d(0, -100px, 0);
}
.will-change {
will-change: transform;
}
<h1>Uses will-change:</h1>
<div class="container">
<div class="card">
<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>
<h1>Uses translate3d:</h1>
<div class="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>Uses neither translate3d or will-change:</h1>
<div class="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>
您可以使用 perspective()
和 transform-origin
值。