html - img :hover (transition opacity) 上的 chrome 出现奇怪的闪烁

Question

当我将 img 悬停在 flexbox 的一行中时，会出现奇怪的闪烁。当我关闭 transition 时，闪烁消失了。发生了什么事，我该如何解决？

错误在这里演示: https://jsfiddle.net/n9wL7par/尝试将鼠标悬停在中间行的 imgs 上。

关闭 transition 不是解决方案。

HTML:

<div id="images">
  <div class="col">
    <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"/>    <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"/>    <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"/>
  </div>
  <div class="col">
      <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"/>    <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"/>    <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"/>
  </div>
  <div class="col">
      <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"/>    <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"/>    <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"/>
  </div>
</div>

CSS:

#images {
    width: 100vw;
    height: auto;
    min-height: 100vh;
    display: flex;
    background: #000000;
}
    #images .col {
        width: 33.33333%;
        padding: 2px;
    }
        #images .col img {
            width: 100%;
            margin: 0;
            opacity: 0.8;
            transition: opacity .2s;
        }
            #images .col img:hover {
                width: 100%;
                opacity: 1;
                cursor: pointer;
            }

我尝试了很多方法来解决它，但它不起作用。Safari 没有闪烁，所以这是一个与 Chrome 相关的错误。

谁有解决办法？

Answer 1

确实是一个奇怪的错误。我设法用你的 fiddle 解决了这个问题，方法是将图像包装在另一个元素中，然后对其应用不透明度过渡。

<div class="inline-block">
    <img/>
</div>