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

确实是一个奇怪的错误。我设法通过将图像包装在另一个元素中，并将不透明度过渡应用于其中来解决它。

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

在img上使用奇怪的闪烁闪烁：悬停（过渡不透明度）

1 个答案: