Border-radius transition not working in Safari - html

Question

I'm working on a small page, and one of the sections will contain an image gallery. The original pictures are squares, but on the page I set the border-radius to 50% and then when you hover above an image the radius goes to 0% and the image also scale to 1.4.
This works fine, but I also want to add a div with text in front of the image when you hover. This text will contain some information, and it will be a bit transparent so you can see the image behind it. The code below works fine in IE, Chrome and FF, but Safari just don't want to cooperate. When the scale property of the image works, the border-radius wont, and vice versa.
HTML
<div class="bild">
<img src="img/Soffa2.png">
<div class="bild_text">
<div class="bild_textrad">
<h2>SoffaDirekt</h2>
<p>Concept</p>
Read more!
</div>
</div>
</div>
CSS
.bild {
text-align: center;
overflow: hidden;
position: relative;
height: 95%;
width: 95%;
border-radius: 50%;
transition-property: border-radius;
transition-duration: .8s;
}
.bild:hover{
border-radius: 0%;
}
.bild > img {
max-width: 102%;
max-height: 102%;
transition-property: transform;
transition-duration: .8s;
}
.bild:hover > img{
transform: scale(1.3);
}
.bild_text{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
background: rgba(23 , 23, 23, 0.5);
color: white;
visibility: hidden;
opacity: 0;
transition: opacity .8s, visibility .8s;
}
.bild:hover > .bild_text{
visibility: visible;
opacity: 1;
}

Answer 1

There are several properties in CSS which need prefix -webkit- applied before them just like
.bild {
text-align: center;
overflow: hidden;
position: relative;
height: 95%;
width: 95%;
border-radius: 50%;
-webkit-transition-property: border-radius; /* Safari */
transition-property: border-radius;
-webkit-transition-duration: 0.8s; /* Safari */
transition-duration: 0.8s;
}
version 3.1 to 6.1 of safari support transition-property and transition-duration with -webkit- prefix.