Html 在img上的chrome中出现奇怪的闪烁：悬停（过渡不透明度）

当我将

img

悬停在flexbox的一行中时，会有一种奇怪的闪烁。当我关闭

transition

时，闪烁消失。发生了什么，我如何修复它

此处演示了该错误： 尝试将中间一行的

imgs

悬停

关闭

转换

不是解决方案

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>

#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相关的bug

---

有人有解决办法吗？

这确实是一个奇怪的错误。我设法在你的小提琴中解决了这个问题，将图像包装在另一个元素中，并对其应用不透明度转换

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

它在中间的列上进行了过滤，只是猜测它与布局相连。如果您尝试以像素为单位指定列宽，或者至少将宽度设置为33-33-34，该怎么办？在我的浏览器中看不到任何闪烁。使用chrome 48，你能详细说明你看到了什么样的闪烁吗？我是不是漏掉了什么？马丁：成功了！我用的是48.0.2564.116Martin:33.33%的计算似乎有问题，可能取决于屏幕大小？我试过使用很多小数，但仍然闪烁。我无法让它工作，你能提供一把小提琴吗？啊，我错过了显示：内联块