Почему в сафари не работает переход css для радиуса границы?

Question

Я пытаюсь сделать простой переход для некоторых фотографий на моем сайте. Идея состоит в том, что картинки представляют собой круги, и когда вы наводите на них курсор, они переходят в квадраты. Это прекрасно работает на chrome и firefox, но я просто не могу заставить его работать на сафари. Вот это css:

.bild {
  text-align: center;
  overflow: hidden;
  position: relative;
  height: 95%;
  width: 95%;
  border-radius: 50%;
  -webkit-transition-property: border-radius;
  -webkit-transition-duration: .8s;
}

.bild:hover{
  border-radius: 0%;
}