web-dev-qa-db-ja.com

オーバーフロー：border-radiusおよびCSS変換では非表示は無視されます（Webkitのみ）

円の中に正方形の画像が欲しいのですが。

ユーザーが画像にカーソルを合わせると、画像が拡大縮小されます（ズームイン）。

円は同じサイズのままである必要があります。

CSSの移行中のみ、正方形の画像が円と重なります（overflow：hiddenがまったく存在しなかったかのように）。

これはChromeとSafariでの奇妙な動作のデモです： http://codepen.io/jshawl/full/flba

Firefoxで問題なく動作しています。

csscss-transitionscss-transforms
20
jessh

余分なマークアップ（円と正方形のコンテナー... 1つだけ必要）を削除し、img自体のスタイルを設定しました。

#wrapper {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

#test {
  width: 100%;
  height: 100%;
  transition: all 2s linear;
}

#test:hover {
  transform: scale(1.2);
}
<div id="wrapper">
  <img src="http://rack.3.mshcdn.com/media/ZgkyMDEzLzA1LzA4L2JlL2JhYmllc193aXRoLjA5NGNjLnBuZwpwCXRodW1iCTg1MHg1OTA-CmUJanBn/8f195417/e44/babies_with_swagg.jpg" id="test">
</div>
22
Aaron K

このコードをimgの親に追加する必要があります：

position:relative;
z-index:1;

ここでの例： http://codepen.io/DavidN/pen/dIzJK

48
David Nazar

このコードを親divに追加して、問題を解決します。

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
5
Atakan Goktepe