Igniteui-angular: Multiple reflow per rendered row

[vanslly]

Description

When the grid renders a row it causes reflow multiple times which impacts initial rendering performance. The grid queries the igx-horizontal-virtual-helper element's scrollLeft twice for each row rendered; which causes reflow.

Additionally, style.left is set instead of using GPU accelerated translate: transformX(...) which likely also worsens performance.

• igniteui-angular version: 7.3.4
• browser: Chrome 74

Steps to reproduce

1. Create a new Angular app with [email protected] as a dependency.
2. Add a basic grid
3. Use Chrome to performance profile the initial grid render.
4. Notice the purple blocks on Chrome Dev Tools Performance Tabs's flame chart.

Result

Flame Chart:

Source View:

Expected result

No reflow per row rendered. The horizontal scroll position should be cached.

[vanslly]

While caching the Horizontal Scroll position across the rendering of multiple rows, it would also be awesome if the container changes case is also addressed, where I am seeing the same issue with lots of reflow.

Flame Chart:

Source View: