Website Scroll-snapping issues in iPhones

I have 3 sections on the landing page. When a user scrolls down from the 1st section, I want it to snap to 2nd-section. The snap-point is start of 2nd section. So the user can then scroll back up or down from 2nd section.

The problem is that for iphones, I can't scroll down to 3rd-section from 2nd because the page keeps snapping back to the snap-point. It works on Android phones or other browsers except iPhones. Please advise.

Below is the overview of the page.

Code:

<!--HTML-->
<main id="landing-container">

<main id="page1">
    <section><p>I love Trump's asshole</p>
    </section>
</main>

<main id="page2">
    <section><img src="asshole.jpg">
    </section>
</main>

<main id="page3">
   <section><p>Labradors are angels</p>
   </section>
</main>

</main>


/*css*/
#landing-container {
    scroll-snap-type: y proximity;
    scroll-snap-stop: normal;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    height: 100vh;
}

#page1 {
    scroll-snap-align: start;
}

#page2 {
    scroll-snap-align: start;
    overflow: auto;
}