Safari中的边框上的图像重叠

Question

这让我们感到难过。我认为这是我们第一次使用border-radius：50％的图像容器，当你翻转时，里面的图像会按比例调整大小。我们设法将图像保留在容器中，但图像仍然与容器的边框重叠。请参阅link以供参考。

a {
    display: block;
    height: 160px;
    width: 160px;    
}
.image-wrapper {  
    border: 6px solid red;
    display: block;
    border-radius: 50%;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 99;
}

a:hover img {
    -webkit-transform: scale(1.25);
    -ms-transform: scale(1.25);
    transform: scale(1.25);
}

img {
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-backface-visibility: hidden;
    -webkit-transition-property: all;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

注意：我们无法在标签上指定边框，因为它将包含除图像本身以外的其他内容。