I have a basic div with flex-direction:column-reverse and a button that adds content to the div.
When adding values in Chrome, Firefox, Edge on Windows, and in Chrome and Firefox on my Galaxy S21 Ultra, everything behaves as expected. The div stays at scroll position 0 (which is the bottom since it is column-reverse). New elements are added until they exceed the div's size, then additional values are added outside the view, requiring manual scrolling to see them.
However, IOS devices, specifically Safari or Chrome on an iPhone 13, exhibit different behavior. With each new value added, the div automatically scrolls instead of remaining at position 0. After adding multiple values, these values become invisible and only reappear when manually scrolled by hand.
Changing the div from
flex-direction:column-reverse to flex-direction:coloumn resolves the issue, keeping the scroll position at 0 as intended.
Here is a simple example. Check it on an IOS mobile device to witness the "incorrect" behavior.
How can this be fixed to ensure the scroll position remains at 0?
Even implementing scroll logic in the addFunction(), like below, only seems to work in IOS devices after manual scrolling has occurred:
document.getElementById("content").scrollTo({top: 0,left: 0,behavior: "smooth"});