Chrome/Operaのボーダー半径とオーバーフロー（ホバーオン）

Question

Chromeの問題& Operaに問題があります。私はborder-radiusを使って "circle divs"を作成しています。このdivの内側にいくつかのテキストを表示したいと思っています。

FirefoxとIEではすべて正常に動作します。しかし、要素（記事）がChrome/Operaで表示されると、オーバーフローが1秒間表示されます。要素からカーソルを削除すると、オーバーフローが再び表示されます（1秒間）。あなたはそれを見ることができますhere。それは3番目のイメージのように見えるはずです。

<article> 
    <a href="/"> 
     <div class="info"> 
      <h3>Title</h3> 
     </div> 
     <img class="sw" src="images/image-sw.jpg"> 
     <img class="clr" src="images/image-colour.jpg"> 
    </a> 
</article> 

CSS：

article{ 
height: 300px; 
width: 300px; 
border-radius: 180px; 
margin: 0 auto; 
display: block; 
position: relative; 
overflow: hidden; 
background: #e3e3e3; 
padding: 5px; 
} 

.info{ 
position: absolute; 
background: #222222; 
color: #ffffff; 
height: 80px; 
width: 300px; 
top: 320px; 
padding: 10px 0; 
text-align: center; 
z-index: 2; 
overflow: hidden; 
} 

article:hover .info { 
top: 240px; 
} 

article img{ 
border-radius: 180px; 
position: absolute; 
left: 5px; 
top: 5px; 
display: block; 
} 

article .clr{ 
opacity: 0; 
transition: all 0.2s ease-in 0s; 
z-index: 1; 
} 

article:hover .clr{ 
opacity: 1; 
} 

Answer 1

article .clrからtransition: all 0.2s ease-in 0s;を削除します。 transitionが0.2sと表示されているため、そのフラッシュがクロムに​​表示されています。遷移プロパティhereについて詳しく読むことができます。