img上的奇怪闪烁镀铬：悬停（转换不透明）

当我将一个img悬停在一排flexbox中时，出现奇怪的闪烁。当我关闭transition时，闪烁消失。发生了什么，我该如何解决它？img上的奇怪闪烁镀铬：悬停（转换不透明）

的错误证明这里： 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相关的错误。

任何人都有解决方案？

来源

2016-02-24 Jacob

它确实filcker的中间列，只是猜测它连接到布局。如果您尝试以像素为单位指定列宽或至少将宽度设置为33-33-34，会怎么样？ –

在我的浏览器中看不到任何闪烁。使用镀铬48 –

您能否详细说明您看到什么样的闪烁？我错过了什么吗？ –

确实是一个奇怪的错误。我设法在你的小提琴中解决它，通过将图像包裹在另一个元素中，并将不透明度转换应用于此。

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

来源

2016-02-24 10:06:02 GMchris

我无法让它工作，你能提供一个小提琴吗？ – Jacob

当然，https://jsfiddle.net/n9wL7par/1/ – GMchris

啊，我错过了显示：inline-block – Jacob

img上的奇怪闪烁镀铬：悬停（转换不透明）

回答

相关问题