Проблемы с преобразованием CSS: масштабирование или переход CSS в Chrome, Safari, Opera, но отлично в Firefox

Question

Я работаю над дизайном и использованием преобразования CSS: масштаб и переход. Он отлично работает в 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 and overflow bug when using any animation/transition

создал скрипку, используя второй ответ на этот вопрос (добавляется рекомендация CSS в этом ответ на правило .picCircle): http://jsfiddle.net/nnvhacLe/1/

ПРИМЕЧАНИЯ: в скрипке, я также удалить display: inline-block из img.grow: правил парения.