ios浏览器向上滑动时非常卡顿，表现的现象是一次只能向上滑动一个item项的高度

[ritilyn1991]

Describe the bug

实现聊天记录无限向上滑动，查询更多历史消息，在android或者pc的网页内，体验都正常，在ios的网页里向上滑动很不流畅，一次只能滑动一个item的高度

用的chat-demo的代码，
只改动了两个方法，模拟向上滚动，拼接数据，重新定位scrollTop

async addMessage() {
      let pos = this.items.length;
      for (let i = 0; i < 20; i++) {
        this.items.unshift({
          id: id++,
          ...messages[id % 10000]
        });
      }
      await nextTick();
      this.scrollToIndex(pos);

      // if (this.streaming) {
      //   requestAnimationFrame(this.addMessage);
      // }
    },

    scrollToIndex(pos) {
      this.$refs.scroller.scrollToItem(pos);
    }

Reproduction

Start stream Stop stream

  <input v-model="search" placeholder="Filter..." />
</div>

<DynamicScroller
  ref="scroller"
  :items="filteredItems"
  :min-item-size="54"
  class="scroller"
>
  <template #before>
    <div class="notice">
      The message heights are unknown.
    </div>
  </template>

  <template #default="{ item, index, active }">
    <DynamicScrollerItem
      :item="item"
      :active="active"
      :size-dependencies="[item.message]"
      :data-index="index"
      :data-active="active"
      :title="`Click to change message ${index}`"
      class="message"
      @click="changeMessage(item)"
    >
      <div class="avatar">
        <img
          :key="item.avatar"
          :src="item.avatar"
          alt="avatar"
          class="image"
        />
      </div>
      <div class="text">
        {{ item.message }}
      </div>
      <div class="index">
        <span>{{ item.id }} (id)</span>
        <span>{{ index }} (index)</span>
      </div>
    </DynamicScrollerItem>
  </template>
</DynamicScroller>

<script lang="ts"> import { generateMessage } from '@/plugins/lib/faker/msg'; import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'; import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'; let id = 0; const messages = []; for (let i = 0; i < 10000; i++) { messages.push(generateMessage()); } export default { components: { DynamicScroller, DynamicScrollerItem }, data() { return { items: [], search: '', streaming: false }; }, computed: { filteredItems() { const { search, items } = this; if (!search) return items; const lowerCaseSearch = search.toLowerCase(); return items.filter(i => i.message.toLowerCase().includes(lowerCaseSearch) ); } }, unmounted() { this.stopStream(); }, methods: { changeMessage(message) { Object.assign(message, generateMessage()); }, async addMessage() { let pos = this.items.length; for (let i = 0; i < 20; i++) { this.items.unshift({ id: id++, ...messages[id % 10000] }); } await nextTick(); this.scrollToIndex(pos); // if (this.streaming) { // requestAnimationFrame(this.addMessage); // } }, scrollToIndex(pos) { this.$refs.scroller.scrollToItem(pos); }, startStream() { // if (this.streaming) return; // this.streaming = true; this.addMessage(); }, stopStream() { this.streaming = false; } } }; </script> <style scoped> .chat-demo { overflow: hidden; height: 100%; display: flex; flex-direction: column; } .scroller { flex: 1; overflow-y: auto; } .notice { padding: 24px; font-size: 20px; color: #999; } .message { display: flex; min-height: 32px; padding: 12px; box-sizing: border-box; } .avatar { flex: auto 0 0; width: 32px; height: 32px; border-radius: 50%; margin-right: 12px; } .avatar .image { max-width: 100%; max-height: 100%; border-radius: 50%; } .index, .text { flex: 1; } .text { max-width: 400px; } .index { opacity: 0.5; } .index span { display: inline-block; width: 160px; text-align: right; } </style>

System Info

iphone 16 pro max
iphone 14 pro

Used Package Manager

npm

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.