box-shadow на div с радиусом границы немного смещен от центра

Question

Я пытаюсь анимировать тень блока в css, чтобы изображение контакта было закруглено.Когда я наведу на него курсор, я хочу показать картинку как есть, и с кружком в 1 пиксель, где предыдущая тень покрыла всю картинку.

Для этого у меня есть div <contact_image>, в котором у меня естьperson изображения под div <person_img> и div, который расположен над изображением с

z-index: 1200;
position: absolute;
top: 35px;
left: 50%;
right: 50%;
transform:translateX(-50%);
border-radius: 100%;
-moz-box-shadow: 0 0 0 300px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 0 0 300px rgba(255, 255, 255, 1);
box-shadow: 0 0 0 300px rgba(255, 255, 255, 1);

, а радиус границы в то время составляет 300 пикселей, который будет охватывать все изображение, но не более, поскольку contact_imageКонтейнер имеет overflow: hidden

Теперь, когда я наведу курсор на изображение, я хочу уменьшить тень от поля

до 1px:

.contact:hover .contact_image .contact_frame{
    animation-fill-mode: forwards;
    animation-name: contact_image_circle;
    animation-duration: 0.5s;
}


    @keyframes contact_image_circle{
    0% {
        box-shadow: 0px 0px 0 300px rgba(255, 255, 255, 1);
    }
    100% {
        box-shadow: 0px 0px 0 1px rgba(255, 255, 255, 1);
    }
}

Но, как вы можете видетьв этой скрипке тень от ящика немного смещена от центра.Я испытываю это в Firefox и IE.

ОБНОВЛЕНИЕ:

Поработав некоторое время, я могу теперь сказать, что это определенно проблема Firefox (иметь одну сторону круглой коробки-тени, немного больше другой).ОДНАКО, я испытываю что-то похожее при использовании IE (тень кажется больше по обеим сторонам, и хорошо сверху и снизу).В Chrome я не могу воспроизвести эту проблему.

Что еще более странно, это то, что у меня возникает проблема только в Firefox и IE при просмотре элементов на моем большом мониторе.На моем ноутбуке (более высокое разрешение) все отлично!

https://jsfiddle.net/29probgm/

Есть идеи, что я делаю не так?