How can I get my CSS transition to work on an iPad (iOS)?

I have a button on my web-page that transitions the page from one section of the page to another section of the same page (ex. To jump from my bio to my projects). On both my web browser (Chrome) and Android device browser (Chrome), when I press the button it has an animation that smoothly scrolls the page. However, when I try the button on my iPad device (Chrome and Safari), the animation is not there, and the page just instantly jumps to the other section.

How can I adjust my code such that the animation works when I access the page from my iPad? Here's some relevant code below:

HTML (one of the arrow buttons):

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

CSS:

.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;
}