vue-virtual-scroller
vue-virtual-scroller copied to clipboard
Items in DynamicScroller looks blurry
Describe the bug
Some items placed in a DynamicScroller looks blurry. The same items after RErender (for example after scroll out of rendered buffer and scroll back, page refreshing) can be blurry or not. The blurring effect appears not on every PC. But appears in the same browser (with the same base preferencies) and OS. I think, the cause of blurring is in the way the items is rendered: style="transform: translateY(957px) translateX(0px);"
Reproduction
The best reproducing is on a texts. But any element (not a text but a box, for example) is blured in this item too. You can make a print screen and scale the captured image in any raster editor to see blurring. Simplified example:
<template>
<DynamicScroller :items="items" :min-item-size="20" class="scroller select-none">
<template v-slot="{ item, index, active }">
<DynamicScrollerItem :item="item" :data-index="index" :active="active" :size-dependencies="[ item.textFormatted ]">
<div class="p-1" v-html="item.textFormatted"></div> <!-- text can be of different length and HTML-formatting (font size, weight, color, etc.) -->
</DynamicScrollerItem>
</template>
<template #after>
<div style="height:10rem"></div>
</template>
</DynamicScroller>
</template>
<style scoped>
.scroller {
height: 100%;
width: 100%;
overflow-y: scroll !important;
}
.select-none {
user-select: none;
}
.p-1 {
padding: 0.25rem;
}
</style>
System Info
Win10
Chrome
Different equipment (PCs)
Used Package Manager
yarn
Validations
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
- [X] The provided reproduction is a minimal reproducible example of the bug.