忽略溢出的 CSS 不透明度过渡：隐藏在 Chrome/Safari 中

Question

在 Chrome/Safari 中的过渡期间，CSS 过渡忽略其父级溢出属性时遇到问题。

JS 给孩子添加一个活动类：

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

父/子的CSS

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

这是小提琴：https://jsfiddle.net/b3ejm7qr/1/

在过渡期间，子级的内容显示在其父级之外，然后在完成时消失。

尝试添加背面可见性，但没有成功。

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

谢谢！

Answer 1

可能是浏览器错误。但是您可以为您的子元素提供border-radius: 50%。在为孩子提供半径后，所有浏览器中的一切都将适用

Answer 2

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

如果不是，看起来像是一个错误类型，正如 Giorgi 所说的 (Google search, first link)。

Answer 3

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

上面已经说明的两种解决方案：

1. 将z-index: 1 添加到您的父母。

2. 向孩子提及border-radius: 50%。

还有，

1. 只需将backface-visibility 浏览器特定属性与transform: translate3d 属性一起添加到您的父级。由于 webkit 浏览器中的错误，您必须手动设置 translate3d 属性。

   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);