Как я могу заставить мой CSS-переход работать на iPad (iOS)?

Question

У меня есть кнопка на моей веб-странице, которая перемещает страницу из одного раздела страницы в другой раздел этой же страницы (например, для перехода от моей биографии к моим проектам). На моем веб-браузере (Chrome) и браузере Android-устройства (Chrome) при нажатии кнопки появляется анимация, которая плавно прокручивает страницу. Однако, когда я пытаюсь нажать кнопку на устройстве iPad (Chrome и Safari), анимация отсутствует, и страница просто мгновенно переходит в другой раздел.

Как настроить код так, чтобы анимацияработает, когда я получаю доступ к странице с моего iPad? Вот соответствующий код ниже:

.fa-chevron-down:hover, .fa-chevron-down:hover, .fa-chevron-down:focus, .fa-chevron-down:active, .fa-chevron-down:visited, .fa-chevron-down:link {
    text-decoration: none;
}

<a id="scroll-arrow" href="#about-me">
    <i id="scroll-btn-header" class="fas fa-chevron-down fa-3x"></i>
</a>

Answer 1

Некоторые CSS-анимации реализованы не во всех браузерах. Иногда они ведут себя по-разному в разных браузерах, потому что не соответствуют стандартам W3C.

Если ваш сайт написан на чистом HTML / CSS / JS (т. Е. Без фреймворков, таких как Vue, React и т. Д.).) Вы должны устранить эту несовместимость самостоятельно.

Вы должны добавить префиксы поставщиков к определенным строкам CSS, чтобы он работал в Safari.

.example {
/* On Chrome and Firefox */
    transition: all .5s;
/* On Safari */
    -webkit-transition: all .5s;
}

MyПредполагается, что вы копируете и вставляете весь свой CSS-код в онлайн-автоматический префикс , который добавляет для вас эти префиксы поставщиков.