search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.32k stars 6.73k forks source link

Virtual scroll with complex items and GPU acceleration #13937

Open shlomiassaf opened 5 years ago

shlomiassaf commented 5 years ago

Bug, feature request, or proposal: Bug

I'm not sure it's a bug but when items of the Virtual Scroll are complex and take some time to render the virtual scroll will show an empty container when scrolling really fast.

The GPU will always scroll at 60fps so the paint does not have the time to show, it will get destroyed for the next calc.

Turning GPU acceleration off will cause a lower FPS in favor of scrolling animation.

See example in this blitz

Is the only solution turning off GPU?

For example, a virtual scroll for a table might have complex rows...

Edit

While chrome will render in slower frame rate when gpu is turned off other browsers will not. I was not able to get the same result in safari and ff.

They will all chase tail and render nothing.

The solution is probably more complex, the virtual scroll should have a flag telling if it’s scrolling or not and the delta, velocity and acceleration of the scroll.

If it’s possible to detect this scenario where rendering does not work it will be awesome.

Users will the choose if to opt in and freeze cd, showing some other content, e.g placeholders...

jonasalberton commented 5 years ago

I have the same problem.

mmalerba commented 5 years ago

You could probably create a custom data source that defers the complex calculation. Similar to how this example simulating server latency works: https://stackblitz.com/angular/ggjvgvmeejr?file=app%2Fcdk-virtual-scroll-data-source-example.ts