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

Posted 2023-03-06

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

【英文标题】：CSS opacity transition ignoring overflow:hidden in Chrome/Safari

【发布时间】：2017-07-06 22:37:33

【问题描述】：

在 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 中的一个已知问题以及是否有修复/解决方法？

谢谢！

【参考方案1】：

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

【讨论】：

这不适用于我实际创建的内容，因为父级内部的图像可以是任何大小，这意味着它不适用于非常宽/高的图像。不过谢谢

如果你在背景中使用带有background-size:cover的图像会怎样

【参考方案2】：

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

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

【讨论】：

老实说，我已经搜索了您的搜索的多个变体，但没有运气......认为我不太擅长谷歌搜索 :) 谢谢！

【参考方案3】：

您可以有 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);

【讨论】：

啊，我没有意识到我也需要 translate3d，谢谢。

此解决方案不适用于我的问题（ios 14.6），我不得不用另一个 div 包裹孩子，并且该 div 也隐藏了溢出。示例：<div class="parent" style="overflow:hidden"><div class="wrapper" style="overflow:hidden"><div class="animation"></div></div></div>