javascript – Safari: div with flex-direction:column-reverse routinely scrolling when including content material

I bought a easy div with flex-direction:column-reverse and a button, which provides content material to the given div.

In Chrome, Firefox, Edge on Home windows and in Chrome and Firefox on my Galaxy S21 Extremely I’ve following anticipated habits:

Once I add values to the div, the div nonetheless stays on the scroll place 0 (which is the underside, since it’s column-reverse). So new parts are added until the div is to large for the div and new values are added outdoors the view (so I’ve to scroll to see them).

In Safari or Chrome in an iPhone 13, the habits is completely different: Once I add new values, the div scrolls on each added worth as an alternative of staying on scroll place 0. And after including a number of values, the values should not proven anymore. They magically seem once more after scrolling by hand.

If I alter the div from

flex-direction:column-reverse to flex-direction:coloumn, the habits is as anticipated: it stays on scroll place 0.

Right here a easy instance. Open it on an IOS cell system to see the “unsuitable” habits.

var values = ["value1", "value2", "value3", "value4", "value5", "value6", "value7"];
var counter = 8;

var addFunction = () => {
    values = [...values, "value"+counter];
    counter++;
    doc.getElementById("content material").innerHTML = renderContent();
}

var renderContent = () => {
    return values.map(v => "<p>"+v+"</p>").be part of("n");
}
doc.getElementById("content material").innerHTML = renderContent();

.outerdiv {
  place: relative; 
  peak: 90vh;
}

.content material {
  show: flex; 
  flex-direction: column-reverse; 
  background-color: #ffa; 
  place: absolute; 
  prime: 0; 
  backside: 2.3rem; 
  left: 0px; 
  proper: 0px; 
  overflow: auto;
}

.addButton {
    place: absolute;
    backside: 0;
}

<div class="outerdiv">
  <div id="content material" class="content material">

  </div>
  <button class="addButton" onClick={addFunction()}>+ Add</button>
</div>

How will you repair this? I would like the scroll place keep.

Even when I add the next scroll logic to the addFunction(), it solely works in IOS after I scrolled as soon as by hand:

doc.getElementById("content material").scrollTo({prime: 0,left: 0,habits: "easy"});