web-dev-qa-db-ja.com

アニメーション/遷移を使用する場合のWebkitの境界半径とオーバーフローのバグ

overflow、border-radius、transitionの組み合わせを使用すると、奇妙なバグが発生します。中にimgが入ったdivがあります。 divの境界線の半径とオーバーフローは非表示に設定されています。画像にカーソルを合わせると、トランジションが発生し、画像が大きくなってズーム効果が生まれます。問題は、オーバーフローが画像の左下と右下で壊れているように見えることです。

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

Firefoxでは問題なく機能しますが、ChromeおよびSafariでは機能しません。

誰がこれを引き起こしているのか、それを修正する方法を知っていますか？

cssgoogle-chromesafariwebkitoverflow
33
Dustin

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

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

3
mikevoermans

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

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

画像にマイナスのZインデックス値を、親に高い値を追加しました

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

li img {z-index: -10;}
3
Rijo K P

マスクされた要素のクリック可能な領域を拡大する明確な境界線を設定できず、他の要素のそれを覆い隠すこともできないため（そして高さを100％に設定しても解決しなかったため）、受け入れられた回答は機能しませんでした。問題）。

可能な解決策については 関連する質問に対する私の回答 を参照してください。

1
bschnur

Div内の写真にズームインしようとしたときに、過去にこのような問題が発生しました。スケール変換に回転scale(1.05) rotate(0.02deg)を追加して修正しました（実際にはグリッチのある線が削除されました）

今日の私の問題は、グリッチラインを移動divホバー効果から外すことです。驚いたことに、私はoverflow: hidden;を削除してそれらを取り除きました

うまくいけば、これは将来のデバッガに役立ちます。

0
mateostabio

私はSafariでこの問題に直面しました（これはSafariの既知のバグです）。 -webkit-mask-imageを適用することで修正され、完全に機能します。乾杯

.block{
       -webkit-mask-image: -webkit-radial-gradient(white, black);
      }
0
Azhar