`window.scrollTo` scrolls outside the container on iOS Safari

I’m running into an issue with window.scrollTo on iOS Safari.

On desktop browsers (Chrome/Firefox/Edge), this works as expected:

window.scrollTo(0, document.body.scrollHeight);

Even when resizing the window, the scroll goes correctly to the bottom of the page.

But on iOS Safari, the behavior is different:

It scrolls past the bottom of my main container (section#section).
The end of the <section> gets aligned at the top of the viewport.
I then need to manually scroll a little bit up/down before the browser “fixes” the scroll position (as if Safari realizes it scrolled outside the valid range).

Here’s the simplified HTML/CSS:

<html>
<head>
<style type="text/css">
body {
    height: 100vh;
}
section#section {
    height: auto;
}
</style>
</head>
<body>
<section id="section">
    [...]
</section>
</body>
</html>

Things I’ve already tried:

window.scrollTo(0, document.body.scrollHeight);

Scrolling the section itself:

section.scrollTo({
    top: section.scrollHeight,
    behavior: 'smooth',
});

Wrapping the scroll in a setTimeout (50ms delay).

Unfortunately, none of these fix the issue on iOS Safari.

Has anyone encountered this behavior before, or knows a reliable workaround to make sure the scroll goes correctly to the bottom on mobile Safari?

Thanks!

Solution

I found the solution 🎉

The issue was caused by using justify-content: flex-end; on the container. Changing it to justify-content: flex-start; fixed the scrolling behavior on iOS Safari:

section.ticket-content {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    /*justify-content: flex-end;*/
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

And here’s the JS I use to scroll to the bottom:

const section = document.getElementById('ticket-content');

void section.offsetHeight; // force reflow
section.scrollTo({
    top: section.scrollHeight,
    behavior: 'smooth'
});