IOS 16 auto scroll to top when open page in safari UI webview

Question

I have an chat app use in web page built by laravel + Vue2. Now i have a problem with IOS 16 and below. When i open this page or send message with safari it always scroll top a bit. When i test it in iphone IOS 17 or android device i don't have this bug.

Here is my code:

<div class="content-detail" ref="content" @scroll="handleScroll">
  <div v-for="(message, index) in talkStoreMessages" :key="index">
    <div :class="{ 'message-file': message.name_file, 'message': 
         !message.name_file }">
         <span v-if="!message.name_file">{{ message.content }}</span>
              <img
                  v-if="message.type === 2"
                  :src="message.name_file"
                  @click="previewFileOnModal(message.name_file)"
                  alt=""
              >
              <video
                  controls
                  v-if="message.type === 3"
                  width="253"
                  playsinline
                  :src="`${message.name_file}?${message.id}`"
                  preload="metadata"
                  class="custom-video"
                  :style="{ backgroundImage: 'url(' + message.thumb + ')' }"
              >
                 <source :src="message.name_file" type="video/mp4">
              </video>
        </div>
    </div>
</div>

<style lang="scss" scoped>
.content-detail {
            padding: 10px 15px;
            width: 100%;
            height: calc(100% - 68px - 54px);
            background: #FDECD2;
            overflow: auto;

            margin-top: 68px;
            margin-bottom: 54px;
            display: flex;
            flex-direction: column-reverse;

            @media (max-width: 768px) {
                @supports (-webkit-touch-callout: none) {
                    padding: 10px 15px 94px 15px;
                    margin-bottom: 0;
                }
                @supports not (-webkit-touch-callout: none) {
                    padding: 10px 15px 64px 15px;
                    margin-bottom: 0;
                }
            }

When i try to set div ( content-detail ) from overflow:scroll to overflow-y:hidden, it's pretty sroll to bottom but i cant scroll anymore ( because scrollbar is hiding )

• I used to do something like this:

<div class="content-detail" :class="overflowY: scrollAble" ref="content" @scroll="handleScroll">
            <div v-if="showBlockScrollDown" class="d-flex flex-column align-items-center block-page-down">

                ...
</div>

data() {
        return {
          scrollAble: false;
        }

created() {
    this.scrollAble = true;
}

<style lang="scss" scoped>

.content-detail {
            padding: 10px 15px;
            width: 100%;
            height: calc(100% - 68px - 54px);
            background: #FDECD2;
            overflow: hidden;

            margin-top: 68px;
            margin-bottom: 54px;
            display: flex;
            flex-direction: column-reverse;

            @media (max-width: 768px) {
                @supports (-webkit-touch-callout: none) {
                    padding: 10px 15px 94px 15px;
                    margin-bottom: 0;
                }
                @supports not (-webkit-touch-callout: none) {
                    padding: 10px 15px 64px 15px;
                    margin-bottom: 0;
                }
            }

.overFlowY {
   overflow-y: scroll
}
   

but it's still scroll to top when i open this page