在将列表更改为网格后，图片不会在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中显示

回答

相关问题