html - 在 CSS 列中发现了非常奇怪的缺陷

Question

因此，当我合并了一个悬停图像时，我在摆弄列并偶然发现了一个非常奇怪的缺陷。

在列的左侧，悬停效果完全正常。 ...但是在列的右侧，悬停效果被禁用。

我仔细检查了它是否是我的代码或我的布局方式，但我找不到任何错误。

有没有其他人也遇到过这个问题？如果是这样，您是否找到任何解决方案来解决这个奇怪的问题？

我设置了一个 jsfiddle在这里。

CSS:

.column {
    margin-top: 5%;
    -moz-column-count: 2;
    -moz-column-gap: 30px;
    -webkit-column-count: 2;
    -webkit-column-gap: 30px;
    column-count: 2;
    column-gap: 30px;
}
img.grayscale {
    filter: gray;
    /* IE6-9 */
    -webkit-filter: grayscale(100%);
    /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease;
    /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden;
    /* Fix for transition flickering */
    clear: both;
    padding-top: 1em;
    padding-bottom: 1em;
    display: block;
}
img.grayscale:hover {
    -webkit-filter: grayscale(10%);
}

HTML:

<ul class="column">
 <li>text...</li>
 <img class="grayscale" src="http://i57.tinypic.com/2i9p8go.jpg" width="80%" height="auto" />
 <li>...text</li>
<ul>

编辑 01 @Richard Parnaby-King 删除 -webkit-backface-visibility: hidden; 的解决方案似乎让事情发生了变化，但是，当光标在图像上快速来回悬停时，它停止工作.仍在寻找解决方案。

Answer 1

问题似乎是由于这一行:

-webkit-backface-visibility: hidden;
/* Fix for transition flickering */

当我从 jsfiddle ( http://jsfiddle.net/d3tm39ra/2/ ) 中删除它时，悬停效果正常。

为什么它会阻止悬停效果起作用？抱歉，我不知道。