在Chrome, Safari, Opera中有CSS转换:缩放或CSS过渡的问题，但在Firefox中没有问题

Question

我正在设计和使用CSS transform:scale和transition。它在Firefox中工作得很好，但在Chrome, Safari和Opera中却不能正常工作。这是一个圆形缩放效果，在这些浏览器中它变成了一个正方形。不知道发生了什么，为什么它在Firefox中工作，而不是其他浏览器。

下面是我的CSS代码:

    .picCircle { 
  max-height: 200px;
  max-width: 200px;
  overflow: hidden;
margin: 0 auto;
border-radius: 50%;
}
/*GROW*/
.grow img {
  transform: scale(1);
  -webkit-transition: all .85s ease;
     -moz-transition: all .85s ease;
       -o-transition: all .85s ease;
      -ms-transition: all .85s ease;
          transition: all .85s ease;
}
.grow img:hover {
display: inline-block;
 transform:scale(1.1);
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-ms-transform:scale(1.1);
-0-transform:scale(1.1);
}

这里是相关的HTML:

<div class="grow picCircle"><a href="/guest-rooms.htm"><img class="img-responsive" style="margin-right: auto; margin-left: auto;" src="http://bnbwebsites.s3.amazonaws.com/5076/shutterstock_61226425_600x600.jpg" alt="" width="600" height="600" /></a></div>
  <h2>Guest Rooms</h2>
  <p>Graceful Bed &amp; Breakfast Inn features six well-appointed bedrooms that are furnished with comfortable antiques.</p>
  <a class="btn btn-white" style="letter-spacing: 1.2px; margin-top: 25px;" href="/guest-rooms.htm">Learn More</a></div>

链接到网站:http://newgracefulfullblue.mybnbwebsite.com/

Answer 1

这似乎是这里的问题的重复:Webkit border-radius和溢出错误时使用任何动画/过渡

使用该问题的第二个答案创建了一个fiddle(将该答案中的CSS建议添加到.picCircle规则中):http://jsfiddle.net/nnvhacLe/1/

注意:在小提琴中，我也从img中删除了display: inline-block。成长:悬停规则。