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