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

您可以为您的问题找到3个解决方案。

已经陈述的两种解决方案：

将z-index: 1添加到您的父级。
向孩子提及border-radius: 50%。

和

只需将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 search，first link）。

CSS opacity转换忽略溢出：隐藏在Chrome / Safari中

3 个答案: