Buggy CSS動畫（轉換）列中的元素？

在將CSS過渡到列中的元素時是否存在任何已知問題？Buggy CSS動畫（轉換）列中的元素？

我在WebKit的問題（Safari和Chrome），沒有測試其他...

我做了a simple demo其中應用（上懸停）到列裏坐着一個圖像的過渡。問題發生在除第一列之外的所有列上，它不會呈現應用的過濾器或轉換。

第一列按預期工作，如果我刪除列也會呈現OK。

這是CSS的相關部分：

#photos img { 
    width:    100% !important; 
    height:    auto !important; 
    opacity:   1; 
    -webkit-filter:  blur(0); 
    -webkit-transition: all 200ms ease-in; 
} 

#photos div:hover img { 
    opacity:   0.25; 
    -webkit-filter:  blur(2px); 
    -webkit-transition: all 200ms ease-in; 
}

來源

2014-02-23 a--m

如果您需要列中「絕對」定位的元素，您將需要該「相對」的位置。

在谷歌代碼有下「Issue 177556: Opacity transitions fail in CSS columns」

不要取出position:relative一個解決方案，只需補充一點：

-webkit-column-break-inside:avoid; 
-moz-column-break-inside:avoid; 
-o-column-break-inside:avoid; 
-ms-column-break-inside:avoid; 
column-break-inside:avoid; 
-webkit-backface-visibility:hidden;

Chrome的版本：版本35.0.1916.114米

編輯：您還可以添加：

display:inline-block;

（它使用的子元素:after CSS選擇器時，解決了我的問題，一個）。

來源

2014-06-12 08:29:15 Sams

這應該是明顯的答案。實際標記的一個根本不起作用。 –

這個答案爲我解決了一個非常奇怪的僅限於Chrome的問題節省了大量工作。道具薩姆斯。 – aendrew

只需將'-webkit-backface-visibility：hidden;'添加到爲我工作的項目。謝謝！ –

從渲染

除/閃爍由於列的問題，我想通了，你div S的position:relative;導致過渡渲染問題。如果您想跟上此佈局，請嘗試在不使用position:absolute;的情況下對div內容進行樣式設置。

來源

2014-02-24 12:45:20 DonJuwe

的問題'的位置是：絕對的;'是將打破列布局。或者，也許我不明白你的建議... –

從'div'中刪除'position：relative;'。這將使你的轉換工作。 – DonJuwe

確實，問題解決了;）謝謝！ –

Buggy CSS動畫（轉換）列中的元素？

回答

相關問題