Chrome漏洞：带有透视效果的边框半径和溢出问题

Question

我在Chrome浏览器上遇到了一个奇怪的问题。

如果我创建一个带有一些透视、边框半径、溢出隐藏以及一个变形的div元素，那么元素内部的div不会遵循透视效果。

如果我去掉边框半径，你可以看到该元素具有透视效果。

有什么想法吗？

参考链接：http://codepen.io/cavax/pen/MwPgxz

<div id="prova">
   <div id="rotate"></div>
</div>
<div id="prova2">
    <div id="rotate2"> </div>
</div>

#prova {
   width: 400px;
   height: 200px;
   -webkit-perspective: 400px;
   perspective: 400px;
   margin: 40px;
   border: 1px solid #000;
   overflow: hidden;
   border-radius: 30px;
}
#rotate {
   width: 200px;
   height: 200px;
   background-color: red;
   -webkit-transform: rotateX(40deg);
   transform: rotateX(40deg);
   position: absolute;
   bottom: 0px;
   left: 100px;
}
#prova2 {
   width: 400px;
   height: 200px;
   -webkit-perspective: 400px;
   perspective: 400px;
   margin: 40px;
   border: 1px solid #000;
   overflow: hidden;
}
#rotate2 {
   width: 200px;
   height: 200px;
   background-color: red;
   -webkit-transform: rotateX(40deg);
   transform: rotateX(40deg);
   position: absolute;
   bottom: 0px;
   left: 100px;
}

- Dtnand

Answer 1

尝试直接在子元素中设置透视：

-webkit-transform: perspective(400px) rotateX(40deg) rotateY(0) translateZ(0);

所以结果是：

#prova2 {
position: relative;
width: 400px;
height: 200px;
margin: 40px;
border: 1px solid #000;
overflow: hidden;
border-radius: 30px;
}

#rotate2 {
width: 200px;
height: 200px;
background-color: red;
-webkit-transform: perspective(400px) rotateX(40deg) rotateY(0) translateZ(0);
position: absolute;
bottom: 0px;
left: 100px;
}

- Mangor

Answer 2

实际上，overflow:hidden用于隐藏透视区域。因此它不会被显示出来。

当你移除overflow:hidden;时，它将正常工作。

谢谢。

- Vikas Pareek