Ошибка преобразования анимации в Safari - PullRequest
Новая
       7

Ошибка преобразования анимации в Safari

0 голосов
/ 17 февраля 2020

Моя проблема в том, что Safari Mobile (может быть, это версия для настольного компьютера - у меня нет устройства для проверки) имеет некоторые проблемы с анимацией, которую я написал в CSS. Я прилагаю код и URL к этому сайту. Как будто я вижу, что значок chrome (fontawesome) вращается, но отображается так, как будто у него нет transform: translate (-50%, - 50%). Это происходит даже на мобильном телефоне chrome. Странно также то, что иногда после обновления страница загружается нормально.

Мой URL: www.maziel.pl 

<article class="offeritem">
            <h3>Moje projekty</h3>
            <div class="offercontent"><i class="fab fa-chrome"></i>
                <p class="innerdesc browser">Google Chrome</p>
                <p class="innerdesc browser">Mozilla Firefox</p>
                <p class="innerdesc browser">Opera</p>
                <p class="innerdesc browser">Microsoft Edge</p>
                <p class="innerdesc browser">Internet Explorer</p>
                <p class="innerdesc browser">Safari</p>
            </div>
            <h4 class="description">
                <p><i class="fas fa-check"></i>Są zoptymalizowane</p>
                <p><i class="fas fa-check"></i>Wczytują się szybko</p>
                <p><i class="fas fa-check"></i>Są intuicyjne</p>
                <p><i class="fas fa-check"></i>Są łatwe w obsłudze</p>
                <p><i class="fas fa-check"></i>Mają estetyczny układ</p>
                <p><i class="fas fa-check"></i>Posiadają przyjemny interfejs</p>
            </h4>
        </article>


.fab.fa-chrome {
position: absolute;
left: 50%;
top: 40%;
-webkit-transform: translate(-50%, -50%) rotate(0);
transform: translate(-50%, -50%) rotate(0);
-webkit-animation: rotate 18s linear infinite;
animation: rotate 18s linear infinite;
opacity: 1;
}

@-webkit-keyframes rotate {
0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
}

100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
}
}

@keyframes rotate {

0% {
    transform: translate(-50%, -50%) rotate(0);
}

100% {
    transform: translate(-50%, -50%) rotate(360deg);
}
}
...