html - 将列表更改为网格后，图像未在 Chrome 中显示

Question

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

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

这只发生在 Chrome (38.0.2125.104 m (64-bit)) 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-转换:translate3d(0,0,0)