I got a simple div with flex-direction:column-reverse and a button, which adds content to the given div.
In Chrome, Firefox, Edge on Windows and in Chrome and Firefox on my Galaxy S21 Ultra I have following expected behavior:
When I add values to the div, the div still stays at the scroll position 0 (which is the bottom, since it is column-reverse). So new elements are added till the div is to big for the div and then more values are added outside the view (so I have to scroll to see them).
In IOS (Safari or Chrome of e.g. an iPhone 13), the behavior is different: When I add new values, the div scrolls on every added value instead of staying on scroll position 0. And after adding multiple values, the values are invisible. They magically appear again after manually scrolling by hand.
If I change the div from
flex-direction:column-reverse to flex-direction:coloumn, the behavior is as expected: it stays on scroll position 0.
Here a simple example. Open it on an IOS mobile device to see the "wrong" behavior.
var values = ["value1", "value2", "value3", "value4", "value5", "value6", "value7"];var counter = 8;var addFunction = () => { values = [...values, "value"+counter]; counter++; document.getElementById("content").innerHTML = renderContent();}var renderContent = () => { return values.map(v => "<p>"+v+"</p>").join("\n");}document.getElementById("content").innerHTML = renderContent();.outerdiv { position: relative; height: 90vh;}.content { display: flex; flex-direction: column-reverse; background-color: #ffa; position: absolute; top: 0; bottom: 2.3rem; left: 0px; right: 0px; overflow: auto;}.addButton { position: absolute; bottom: 0;}<div class="outerdiv"><div id="content" class="content"></div><button class="addButton" onClick={addFunction()}>+ Add</button></div>How can you fix this? I want the scroll position staying at 0;
Even if I add the following scroll logic to the addFunction(), it only works in IOS after I scrolled once by hand:
document.getElementById("content").scrollTo({top: 0,left: 0,behavior: "smooth"});