将列表更改为网格后，图像不会显示在Chrome中

Question

我在Google Chrome浏览器中遇到了一个奇怪的行为。在我的网站上，我有一个列表/网格视图。列表和网格之间的更改由Javascript和CSS完成。 Javascript唯一能做的就是更改list元素的css类。

因此，当我第一次加载页面时，会显示所有图像。但是从列表更改为网格，图像不会回来，直到我开始滚动或用鼠标悬停在图像上。见下面的例子。

仅在Chrome中发生（38.0.2125.104 m（64位）） 没有IE问题，FireFox没有这个问题。

修改

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*/
}

Answer 1

我在Chrome渲染方面遇到了类似的问题。图像在那里，但在你盘旋之前看不见。尝试添加-webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0)