В Хроме и на локальном сервере в Сафари все работает нормально, но когда выгружаю сайт на хостинг в Сафари анимация появляется кусками и лагает.
Отдельно кусок с анимацией:
сейчас норм работает в Сафари, а вот сайт, который выгружаю на хостинг и где анимация лагает:
Что не так? Как это поправить?
body {
background-color: #ccc;
}
.header-product {
margin-top: 200px;
}
@keyframes draw_arrow {
0% {
width: 1px;
opacity: 1;
left: 10px;
position: absolute;
}
100% {
width: 100%;
opacity: 1;
left: 10px;
max-width: 900px;
}
}
.has-conte {
z-index: 500;
position: absolute;
top: 100px;
margin: auto;
left: 0;
right: 0;
max-width: 1140px;
}
.img-absf {
animation: 2s ease-out forwards draw_arrow;
z-index: 200;
overflow: hidden;
left: 0;
animation-delay: 1s;
opacity: 0;
position: absolute;
height: 250px;
width: 100%;
}
.img-abss {
position: absolute;
top: 0px;
left: 0px;
max-width: 800px;
height: 250px;
z-index: 300;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<div class="header-product">
<div class="has-conte wow fadeInRight animated" data-wow-duration="2s">
<div class="img-absf">
<img class="img-abss" data-wow-delay="2.7s" src="https://qamos.ru/product/img/_src/product.svg" alt="">
</div>
</div>
<div class="header-product_img fadeInUp animated" data-wow-duration="2s" style="visibility: visible;-webkit-animation-duration: 2s; -moz-animation-duration: 2s; animation-duration: 2s;">
<img src="https://qamos.ru/product/img/_src/img11.jpg" alt="">
</div>
</div>