scrollTop behaves exactly opposite on iOS safari

Template:

<section id="chat-messages" class="chat-messages">
      <div class="message sent">
        <p>e</p> <span>1:34pm</span></div>
      <div class="message sent">
        <p>a</p> <span>1:34pm</span></div>
      <div class="message sent">
        <p>a</p> <span>1:18pm</span></div>
      <div class="message received">
        <p>123123</p><span>12:34pm</span></div>
      <div class="message received">
        <p>wad up</p> <span>11:23pm</span></div>
      <div class="message received">
        <p>R</p> <span>10:17pm</span></div>
    </section>
    <section>
      <input type="text" id="text">
      <button id="getCurrentPos">Get Current Position</button>
      <button id="gotoInputPos">Goto input position</button>
    </section>

CSS:

.chat-messages {
  flex-grow: 1;
  display: flex;
  flex-direction: column-reverse;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  margin-top: 0;
  padding: 20px 10px 20px 10px;
  height: 50vh;
}

Javascript:

let chatMessages = document.getElementById('chat-messages')
let text = document.getElementById('text')
let getCurrentPosition = document.getElementById('getCurrentPos')
let gotoInputPosition = document.getElementById('gotoInputPos')

getCurrentPosition.addEventListener('click', () => {
  text.value = chatMessages.scrollTop
})

gotoInputPosition.addEventListener('click', () => {
  chatMessages.scrollTop = text.value
})

Codepen demo: https://codepen.io/coderpradp/full/WNNgarP

In other device/browser, after scrolling to top and clicking Get Current Position button returns scrollTop value 0. But on iOS it returns negative number. Similary, scrollTop = 0 on other device scrolls to top but on iOS it scrolls to bottom. Can anyone explain this?