keyframes не работает в safari

Question

В хроме и на локальном сервере в сафари всё норм работает. Но когда выгружаю сайт на хостинг - в сафари анимация появляется кусками и лагает..

https://codepen.io/oleg-z-zin/pen/zYrLrMJ отдельно кусок с анимацией - сейчас норм работает в сафари

а вот сайт, который выгружаю на хостинг и анимация лагает qamos.ru/product/ что не так? как это поправить?

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>

Answer 1

Вам следует использовать translate() вместо left, right, top, и bottom.

transform: translateX(100px) // подвинет объект на 100px вправо
transform: translateY(20px) // подвинет на 20px вниз
transform: translate(20px, 20px) // подвинет на 20px вправо и на 20px вниз

Это даст вам возможность анимировать супер-плавно, задействуя GPU и субпиксельные величины.

БЛОГ НА HUSL

keyframes не работает в safari

Ответы (1 шт):