在將列表更改爲網格後，圖片不會在Chrome中顯示

我在Google Chrome瀏覽器中遇到了一個奇怪的行爲。在我的網站上我有一個列表/網格視圖。列表和網格之間的更改由Javascript和CSS完成。 Javascript所做的唯一的事情就是改變列表元素的css類。在將列表更改爲網格後，圖片不會在Chrome中顯示

所以當我第一次加載頁面時，所有的圖像都顯示出來。但是，從列表更改爲網格，圖像不會回來，直到我開始滾動或將鼠標懸停在圖像上。見下面的例子。 enter image description here

這隻發生在Chrome（38.0.2125.104米（64位））沒有問題與IE，火狐沒有這個問題。

EDIT

的HTML，類grid改變爲list。

<ul class="grid"> 
    <li><div>Div with product layout</div></li> 
    <li><div>Div with product layout</div></li> 
    <li><div>Div with product layout</div></li> 
</ul>

CSS

ul.grid > li { 
    /*CSS HERE*/ 
} 

ul.list > li { 
    /*CSS HERE*/ 
}

來源

2014-10-17 Timo002

我從來沒有見過類似的東西..如果在更改類後使用jQuery來模擬每個li元素上的mouseover？像jQuery（「ul.grid li」）。mouseover（）。或者，再次使用jQuery，也許嘗試一個非常快速的.hide（），然後顯示整個ul的.show（）？ – 2014-10-17 13:31:07

@mike威利斯，請參閱下面的tmg的答案！ – Timo002 2014-10-18 15:32:24

我曾與鍍鉻渲染類似probleme。圖像在那裏，但直到你懸停或沒有看到。嘗試添加-webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0)

來源

2014-10-17 08:08:11 tmg

通過在'img {'中添加'-webkit-backface-visibility：hidden;'在CSS中，圖像沒有顯示。但是有一個區別。當我將鼠標懸停在一幅圖像上時，所有圖像都會立即返回，而不僅僅是一個圖像。 – Timo002 2014-10-17 11:16:43

您使用javascript切換的類，它們更改顯示屬性？ – tmg 2014-10-17 12:31:59

我用一個小小的代碼示例更新了我的問題。我不改變圖像的顯示屬性。通過從列表更改爲網格，圖像的CSS不受影響。 – Timo002 2014-10-17 12:41:40

在將列表更改爲網格後，圖片不會在Chrome中顯示

回答

相關問題