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

【问题标题】：Images are not shown in Chrome after changing list to grid将列表更改为网格后，图像未在 Chrome 中显示
【发布时间】：2014-10-17 21:36:47
【问题描述】：

我在 Google Chrome 浏览器中有一个奇怪的行为。在我的网站上，我有一个列表/网格视图。列表和网格之间的切换是由 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*/
}

【问题讨论】：

我从来没有见过这样的事情。如果你在更改类后使用 jQuery 模拟每个 li 元素上的鼠标悬停怎么办？像 jQuery("ul.grid li").mouseover() 之类的东西。或者，再次使用 jQuery，也许尝试一个非常快速的 .hide() 然后 .show() 整个 ul？
@mike Willis，请参阅下面 tmg 的答案！

标签： html css google-chrome

【解决方案1】：

我在 chrome 渲染方面遇到了类似的问题。图像在那里，但在你悬停之前是不可见的。试试加-webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0)

【讨论】：

通过将 CSS 中的 -webkit-backface-visibility: hidden; 添加到 img{，图像仍然不显示。但是有区别。当我将鼠标悬停在一张图片上时，所有图片都会立即返回，而不仅仅是悬停的那张。
你用javascript切换的类，它们会改变显示属性吗？
我用一个小代码示例更新了我的问题。我不更改图像的显示属性。从列表更改为网格，图像的 CSS 保持不变。
你也可以试试添加 -webkit-transform: translate3d(0,0,0)
试一下图片和图片的父元素