使用任何動畫/轉換時Webkit邊界半徑和溢出錯誤

當我使用overflow,border-radius和transition的組合時，我遇到了一個奇怪的錯誤。我在裏面有一個img div。 div的邊界半徑和溢出設置爲隱藏。當我將鼠標懸停在img上時，發生了一個轉換，它會使圖像變大以創建縮放效果。問題在於溢出似乎在圖像的左下角和右下角處斷裂。使用任何動畫/轉換時Webkit邊界半徑和溢出錯誤

我已經創建了一個jsfiddle讓你看到我在說什麼。 http://jsfiddle.net/dmcgrew/HuMrC/1/

它在Firefox中正常工作，但在Chrome和Safari中出現故障。

任何人都知道可能會導致這種情況或如何解決它？

來源

2013-01-17 Dustin

感謝名單你的問題，是要發佈我自己:)感謝名單！ –

請看看這個： http://stackoverflow.com/questions/20001515/chrome-bug-border-radius-not-clipping-contents-when-combined-with-css-transiti 這是最後的答案和最佳解決方案！ –

相關的鉻錯誤：[＃157218]（https://code.google.com/p/chromium/issues/detail?id=157218）。 –

我不知道如果我正確地理解問題，因爲圖像沒有加載。如果您將height: 100%;添加到.inner_block它是否有助於解決您的問題？

http://jsfiddle.net/HuMrC/2/

來源

2013-01-17 16:42:53 mikevoermans

是的，似乎解決它。我也可以通過向.block div添加透明顏色的邊框來修復它。 – Dustin

接受的答案並沒有爲我工作，因爲我不能有明確的邊界增加了屏蔽件的可點擊區域，我也不希望它掩蓋了其他元素（和設置到100％的高度沒有解決問題）。

請參閱my answer to a related question以獲得可能的解決方案。

來源

2013-04-19 16:50:26 bschnur

我有同樣的確切問題。將它添加到父容器爲我解決了它（這是一個很少的mixin）。

.transitionfix() { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0) 
}

來源

2013-05-21 23:25:44

Thanx爲您的答案，即將發佈我自己的問題:) Thanx！ –

如果您在Safari中測試我的jsFiddle，Safari仍會中斷http://jsfiddle.net/d4h2t0Lt/ – woutvdd

謝謝！這適用於Chrome和Mac版Safari（v7.1.2）。如果您從CSS文件中刪除/ * FIX * /行，然後通過鍵入「ja」來過濾列表，您會看到（在webkit上）Jay-z的頭像會在動畫過程中忽略溢出和邊界半徑。在這裏查看我的plunker http://plnkr.co/ayRgf52URQQ5XLqQtZVJ – tbutcaru

我加負的z-index值圖像和更高的價值父

li {z-index:10; overflow: hidden;} 

li img {z-index: -10;}

來源

2017-06-23 09:53:00

使用任何動畫/轉換時Webkit邊界半徑和溢出錯誤

回答

相關問題