忽略溢出的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中

回答

相關問題