CSS 不透明度过渡忽略 overflow:hidden Chrome/Safari

Question

CSS 转换有问题，在 Chrome/Safari 的转换过程中忽略了它们的 parent 溢出属性。

JS 将活动 class 添加到 child:

$('.child').addClass('active');

CSS 为 parent/child

.parent {
  position:relative;
  width:250px;
  height:250px;
  background:#000;
  border-radius:250px;
  overflow:hidden;
}

.child {
  opacity:0;
  transition:1s opacity ease-in-out;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:blue;
  width:250px;
  height:250px;

  &.active {
    opacity:1;
  }
}

这是 fiddle：https://jsfiddle.net/b3ejm7qr/1/

在转换过程中，child 的内容显示在 parent 之外，然后在完成时消失。

尝试添加 backface-visibility 但没有成功。

一直试图找到同样的问题，但一直没有成功...想知道这是否是 Chrome/Safari 中的一个已知问题，是否有修复/解决方法？

谢谢！

Answer 1

可能是浏览器错误。但是您可以为您的 child 元素提供 border-radius: 50%。在为 child 提供半径后，所有浏览器都会为

Answer 2

我在两个元素中都添加了 z-index，也许这就是您在看什么。 https://jsfiddle.net/b3ejm7qr/2/

如果不是，看起来像是 bug 类型，正如 Giorgi 所说 (Google search, first link)。

Answer 3

您的问题可以有 3 个解决方案。

已经说明的两种解法为：

将 z-index: 1 添加到您的 parent。
对child提及border-radius: 50%。

而且，

只需将 backface-visibility 浏览器特定属性与 transform: translate3d 属性一起添加到您的 parent。由于 webkit 浏览器中的错误，您必须手动设置 translate3d 属性。
```
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
```

CSS 不透明度过渡忽略 overflow:hidden Chrome/Safari

CSS opacity transition ignoring overflow:hidden in Chrome/Safari

css

opacity

transitions