overflow: border-radius和CSS转换时隐藏忽略(仅限webkit)

Question

我想在圆圈内有一个正方形的图像。

当用户将鼠标悬停在图像上时，图像应缩放(放大)。

圆的大小应该保持不变。

只有在CSS过渡期间，正方形图像才会与圆形重叠(就好像overflow:hidden根本不在那里一样)。

这是一个在Chrome和Safari中有奇怪行为的演示：http://codepen.io/jshawl/full/flbau

在火狐中工作正常。

Answer 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>

​

Answer 2

您需要将此代码添加到您的img的父对象中：

position:relative;
z-index:1;

示例如下：http://codepen.io/DavidN/pen/dIzJK

Answer 3

将此代码添加到您的父div并解决问题：

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