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

在Chrome/Safari中转换过程中遇到CSS转换问题，忽略其父项溢出属性。忽略溢出的CSS不透明度转换：隐藏在Chrome/Safari中

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

谢谢！

来源

2017-02-17 Max Henchman

您可以针对您的问题提供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);

来源

2017-02-17 12:23:07 nashcheez

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

不客气。 – nashcheez

索引做了诡计，谢谢 –

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

来源

2017-02-17 11:58:15

这不是什么我实际上是在制造作为父内的图像可以是任何尺寸意味着它不会工作在很宽/高的图像工作。由于 –

，以及如果您在背景中使用图像与'background-size：cover'有什么区别呢？ –

我增加了z-index两个元素，也许是你在看什么。 https://jsfiddle.net/b3ejm7qr/2/

如果不是，看起来像是一种错误类型，正如Giorgi所说（Google search,first link）。

来源

2017-02-17 12:08:00 RompePC

我老实地搜索了搜索的多个变种，没有运气......我认为我不擅长Google搜索:)谢谢！ –

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

回答

相关问题