40

overflow、border-radius、および を組み合わせて使用​​すると、奇妙なバグが発生しtransitionます。内部に img を含む div があります。

<a href="#" class="block size1 annualreport nonprofit">
    <div class="inner_block">
        <img src="http://i.imgur.com/8uuZB.jpg" />
    </div>
</a>

div には がありborder-radius、オーバーフローは非表示に設定されています。

body {background-color:#78735e;}

.block {
    position: absolute;
    left: 0px;
    top: 0px;
    border-radius: 10px;
    margin: 6px;
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2);
    overflow:hidden;
}
.size1 {
    width: 226px;
    height: 464px;
    min-width: 160px;
    max-width: 226px;
}
.inner_block {
    overflow: hidden;
    border-radius: 10px;
}
.block img {
    width: 100%;
    height: 100%;
    transition: all 0.1s;
}

.block img:hover { width:115%; height:115%; }

画像の上にカーソルを合わせると、画像を大きくしてズーム効果を作成するトランジションが発生します。問題はoverflow、画像の左下と右下で壊れているように見えることです。

私が話していることをあなたが理解できるように、JSFiddle を作成しました。http://jsfiddle.net/dmcgrew/HuMrC/1/

Firefox では問題なく動作しますが、Chrome と Safari では機能しません。

これを引き起こしている可能性のあるもの、またはそれを修正する方法を知っている人はいますか?

4

9 に答える 9

94

私はまったく同じ問題を抱えていました。これを親コンテナに追加すると解決しました（これはLESS mixinです）。

.transitionfix() {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0)
}
于 2013-05-21T23:25:44.067 に答える
2

画像にマイナスの z-index 値を追加し、親に高い値を追加しました

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

li img {z-index: -10;}
于 2017-06-23T09:53:00.367 に答える
1

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

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

于 2013-01-17T16:42:53.510 に答える