Scroll performance issue: Disable All Grid Animations

[SkylerLutz]

Is it possible to disable all grid animations? I am trying to pinpoint a scrolling performance issue and the only thing I can't seem to rule out is scrolling animations (igxScrollInertia directive?) My users' browsers are on vm's without hardware acceleration and I am seeing framerates drop below 10fps.

Another weird symptom I might as well mention is that I observe change detection running for all rows on mouseover of any row, which seems odd. The grid's primaryKey is set to a unique field on the input row objects.

Potential red herring: my grid has upwards of 3000 JS event listeners, even though I never added any, compared to the vendor example which only has ~100. I have roughly 1000 rows of 8 columns, and roughly 40 can fit on the page. Virtualization does appear to be working as the number of DOM objects remains constant during scrolling after grid data is loaded.

Version 12.1.13, although I see the same issue in 16.x

I tried setting [@.disabled] directive on idx-grid but it seems to have no effect. I also tried setting css transition: none for * but that did not work either.

[skrustev]

Hi @SkylerLutz,

Those numbers you posted seem to be correct for the grid regarding the event listeners. Depending on how many rows and columns are visible, the number of event listeners will vary greatly. For example the sample you linked for 8 columns and 9 rows has roughly 150 event listeners, which will progressively increase with more rows and columns.

Regarding disabling all animations on the grid, there is no all in one method that could do that. Can you tell me what would be the specs of those VMs that you are using? If they are not very powerful, that is something to be expected for 40 rows and 8 columns, because there are a lot of moving parts and it might not run as well as a more powerful machine.

The scroll inertia directive indeed uses gpu accelerated animations, which might be related to you issue you are having. I can suggest a way to disable the scroll animation, but this is not a recommended way of doing it for any user scenario and only for testing. If you would like to have more control over it, a feature request should be made in this case.

By setting the property bellow to 0, it should just perform a regular scroll and not use any animation when using mouse wheel:

gridRef.verticalScrollContainer.dc.instance._scrollInertia.smoothingDuration = 0;

Like I said earlier, I would suggest using it for testing purposes and a feature request would suit it better if you would like for it to be configurable in the future.

[dkamburov]

@SkylerLutz please re-open the issue if you have further questions on it.