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>
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:
System Info
Used Package Manager
yarn
Validations