Visual glitches while scrolling - Bad performance - Not smooth visualization

nikolay-yankov commented 5 years ago

Content doesn't render smoothly while scrolling on desktop (Chrome/Firefox) and mobile devices. Visual glitches appear even if you scroll very slowly. This happens with both DynamicScroller and RecycleScroller. In my case I have a list of 300 cards with variable height, approximately 180px each. The card is composed mostly of Vuetify 2.0 components <v-row>, <v-col>, <v-flex>, <v-avatar>, <-v-chip>, <v-btn>, etc., where most of them have display: flex, justify-content, align-self and other alignment CSS properties.

Demo Scroll Issue Here

Example: DynamicScroller pseudo configuration

<DynamicScroller :items="data" :min-item-size="100" :buffer="500" key-field="id">
 <template v-slot="{ item, index, active }">
  <DynamicScrollerItem :item="item" :active="active" :data-index="index">
    <v-card>
      <v-row>
        <!-- Card Content Here  --> 
      </v-row>
   </v-card>
  </DynamicScrollerItem>
 </template>
</DynamicScroller>

I ran several performance tests and the overall FPS drops drastically when scrolling. You can see it here ->

Vue Virtual Scroller - Performance Issues

I found out that each DynamicScrollerItem represents a layer (in Chrome Layers tool) which is positioned with the help of transform: 'translateY(number)'. Could this cause the issue? I tried various configurations with min-item-size, buffer and other props with no avail.

Any ideas are welcome and thank you for your attention!

danielgindi commented 5 years ago

I tested this, didn't see any issues. Could be a specific mouse/touchpad scrolling issue - some of them (like on the mac) do not fire scroll events while smooth scrolling. This is an issue with any virtual list.

mech01nc01 commented 4 years ago

no Problems here wih you demo, but i've found this because i have a smilar issue with a "flextable" even with just 21 items it laggs, buti dont't know why

rogeralsing commented 4 years ago

I have seen bad rendering performance with the Vuetify components, unrelated to virtual scroller.

e.g. buttons, textboxes are very heavy to render.

aalyokhin commented 4 years ago

@nikolay-yankov have you ever been able to resolve this? having the same situation with Vuetify.

nikolay-yankov commented 4 years ago

@aalyokhin Nope, the only thing which helped a little bit is to use fewer Vuetify elements as some of its styles increase this effect. P.S. Thank you all for the time spend!

patrykharanczyk commented 4 years ago

I had the same issue. For me including below import in my index.ts file fixed the problem. import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

Akryum / vue-virtual-scroller

Visual glitches while scrolling - Bad performance - Not smooth visualization #278

Demo Scroll Issue Here