边界半径过渡在Safari中不起作用

Question

我正在处理一个小页面，其中一个部分将包含一个图像库。原始图片是正方形，但是在页面上，我将边框半径设置为50％，然后将鼠标悬停在图像上方时，半径将变为0％，图像也将缩放为1.4。

效果很好，但是当您将鼠标悬停时，我也想在图像前面添加一个div，并在其前面添加文本。该文本将包含一些信息，并且会有些透明，因此您可以看到其后的图像。下面的代码在IE，Chrome和FF中可以正常工作，但Safari只是不想合作。当图像的scale属性起作用时，边框半径将不会，反之亦然。

HTML

<div class="bild">
        <img src="img/Soffa2.png">
          <div class="bild_text">
            <div class="bild_textrad">
              <h2>SoffaDirekt</h2>
              <p>Concept</p>
              <a href="#">Read more!</a>
            </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

CSS中有一些属性，需要像前面一样应用前缀-webkit-

.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;
}

Safari的[version 3.1 to 6.1支持带有transition-property前缀的transition-duration和-webkit-。