Проблема с CSS в Safari

У меня есть окно с красивым наложением при наведении, которое анимируется. Это отлично работает во всех браузерах, однако в 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;
  }
}