primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.45k stars 4.6k forks source link

Tree virtualScroll - issues with rendering after v15.1.0 #12922

Open ivan-artkod opened 1 year ago

ivan-artkod commented 1 year ago

Describe the bug

Since PrimeNG v15.1.0 onwards (tested on all versions till 15.4.0) Tree with virtualScroll will improperly render nodes on scrolling.

There could be smaller or bigger empty gaps at the end of the tree visible area.

It seems to cause ul.p-tree-container being improperly transformed vertically using transform: translate3d(0, y, 0) with likely wrong y value

Environment

Angular 15.2.4

Issue occurs on PrimeNG 15.1.0 - 15.4.0

PrimeNG <=15.0.1 no issue

Reproducer

https://stackblitz.com/edit/angular-ivy-n4by2x?file=package.json

Angular version

15.2.4

PrimeNG version

15.1.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

irrelevant

Browser(s)

Tested in latest FF & Chrome

Steps to reproduce the behavior

In the example provided, try scrolling with mouse or use keyboard pg up/down.

There should be immediate glitching occurring at the end of the tree, even though there is enough space to render and there is definitely more items bellow, like shown in this screenshot:

Screenshot 2023-04-20 at 16 56 57

Expected behavior

It should work as in versions <=15.0.1 like in this example: https://stackblitz.com/edit/angular-ivy-4c8asu?file=package.json

cetincakiroglu commented 1 year ago

Hi @ivan-artkod ,

It's strange that the issue only occurs in your example. It seems that it's not related to the styling of the tree container. I've commented all of your functions and surprisingly it works as it should be, I guess something in your code brakes the logic. We couldn't replicate it anywhere else except your example. Is it possible that something may wrong with your calculations?

https://stackblitz.com/edit/angular-ivy-rqpg65?file=src%2Fapp%2Fvirtual-tree%2Fvirtual-tree.component.ts