Safari上的CSS问题

Question

我有一个带有漂亮悬停叠加效果的盒子。这适用于所有浏览器。但是在Safari（桌面和移动设备）上有一些样式没有正确应用（宽度，高度和填充）。当我使用检查器关闭和重新打开这些样式时，一切都是应有的，Safari似乎在开始时似乎没有正确应用。此外，没有CSS继承问题，因为Safari声称使用下面定义的规则，添加!important无效。请参阅下面的代码和图片。

HTML

<div class="col-md-5 hla-building-col animated fadeInUp" style="height:350px;background-image:url(/placeholder.jpg)">
   <div class="overlay text-center">
      <h3>Karma</h3>
      <p>Sitting right in the heart of it all...</p>
      <a>Learn More</a>
   </div>
</div>

CSS

.hla-building-col {
  padding: 0;
  box-shadow: -1px 0px 50px -6px rgba(102,103,102,1);
}    
.hla-building-col .overlay {
  background-color: rgba(255,255,255,.9);
  width: 80%;
  height: 40px;
  padding: 8px 15px;
  margin: 0 auto;
  transform: translateY(165px);
  transition: all 600ms ease;
}
.hla-building-col:hover .overlay {
  width: 100%;
  height: 100%;
  padding: 100px 15px;
  /**** EDIT: Properties above are not rendering ****/
  margin: 0 auto;
  transform: translateY(0);
  /*     transition: all 600ms ease; */
  animation-duration: 1s;
  animation-name: slidein;
}
.hla-building-col .overlay p, .hla-building-col .overlay a {
    opacity: 0;
}
.hla-building-col:hover .overlay p, .hla-building-col:hover .overlay a {
    opacity: 1;
    transition: all 1000ms ease;
    transition-delay: 1000ms;
}


@keyframes slidein {
  from {
        width: 60%;
    height: 40px;
    transform: translateY(165px);
    padding-top: 8px;
  }

  to {
    width: 100%;
    height: 100%;
    transform: translateY(0);
    padding-top: 100px;
  }
}

Answer 1

Safari使用WebKit，您可以使用-webkit - 前缀将其添加到您的CSS中。

点击此处了解详情：en.wikipedia.org/wiki/WebKit此处：developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions