Содержит изображение в закругленном переполнении div

Question

Хром работает отлично, содержащий изображение с переполнением: скрытый округленный div, однако сафари не очень хорошо справляется с этим, переполнение: скрытый, похоже, не работает здесь.

вот пример

вот мой дерзость код:

.profile-image-container 
    position: relative 
    top: 3px 
    display: inline-block 
    cursor: pointer 

    .profile-image 
    width: 33px 
    height: 33px 
    display: block 
    position: relative 
    border: 2px solid $default-border-color 
    position: relative 
    top: -5px 
    border-radius: 50% 
    -moz-border-radius: 50% 
    -webkit-border-radius: 50% 
    overflow: hidden 

Haml:

.profile-image-container 
    .profile-image 
     =image_tag "avatar.jpg" 
    %span.status.online 
     %i.icon.icon-check-small 

скрипку: http://jsfiddle.net/LB2EQ/

Answer 1

Задача 1. В Safari образы не наследуют border-radius, так что вы должны добавить его.

Задача 2. Вашего изображение имеет различную ширину & высоту, чем профиль ПОС контейнер, поэтому вы увидите очень странные границы радиус (только верхний левый), если не изменить его размер.

.profile-image img{ 
    width:33px; 
    height:33px; 
    border-radius:50%; 
} 

См рабочего раствора на jsfiddle: http://jsfiddle.net/LB2EQ/1/