I am experiencing an issue where a box with a hover overlay does not display correctly on Safari browsers (desktop and mobile). The styles such as width, height, and padding are not applied properly initially. Oddly enough, when I toggle these styles off and then back on using the inspector tool, everything corrects itself. I have verified that there is no CSS inheritance problem as Safari seems to be following the defined rules correctly. Even adding !important to the styles does not resolve the issue. Refer to the code and images provided below for more details.
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;
}
}