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

Question

在Chrome/safari的过渡期间，CSS过渡忽略了父母的溢出属性。

Js向孩子添加一个活动类：

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

css for 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;
  }
}

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

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

尝试添加backface-visibility毫不运气。

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

谢谢！

Answer 1

您可以有3个解决方案。

已经说为：

的两个解决方案

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

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

和，

3. 只需将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);
   

Answer 2

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

Answer 3

我在这两个元素中添加了 z-index，也许是您正在查看的内容。https://jsfiddle.net/b3ejm7qr/2/

如Giorgi所说（Google搜索，第一个链接）。