アニメーション/トランジションを使用すると、Webkitの境界半径とオーバーフローのバグが発生する

Question

overflow,border-radius、およびtransitionの組み合わせを使用すると奇妙なバグが発生しています。私はそれの中にimgを持つdivを持っています。 divには境界線の半径があり、オーバーフローはhiddenに設定されています。 imgの上にマウスを置くと、イメージを拡大してズーム効果を作り出すトランジションが発生します。問題は、オーバーフローが画像の左下と右下に壊れているように見えることです。

私は、あなたが私が何を話しているかを見るためにjsfiddleを作成しました。 http://jsfiddle.net/dmcgrew/HuMrC/1/

Firefoxではうまく動作しますが、ChromeとSafariは壊れています。

これを引き起こしている可能性がありますか、それを修正する方法を知っている人は誰ですか？

Answer 1

画像が読み込まれていないため、正しく問題を理解しているかどうかわかりません。 height: 100%;を.inner_blockに追加すると問題が解決しますか？

http://jsfiddle.net/HuMrC/2/

Answer 2

私はマスクされた要素のクリック可能な面積を増加させる明確な境界線を持つことができないので、受け入れ答えは私のために動作しませんでした、また私はそれが他の要素（および設定のことをあいまいにしたいです100％までの高さは問題を解決しなかった）。

考えられる解決方法はmy answer to a related questionを参照してください。

Answer 3

私は同じ正確な問題を抱えていました。これを親コンテナに追加すると、それは私のために解決されました（これはLESSミックスインです）。

.transitionfix() { 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0) 
} 

Answer 4

私はあなたの質問のためにありがとう親

ため

li {z-index:10; overflow: hidden;} 

li img {z-index: -10;}