Description
After HammerJS was replaced with native pointer and touch handling, continuously
dragging an igxFor virtualized list with a finger became noticeably less
responsive. While the finger remains in contact with the list, the rendered
items stutter and lag behind its movement.
The attached reproduction uses IgxListItem rows inside an igxFor viewport.
It includes eager change detection and an impure filter over 100,000 records so
that the difference between the gesture implementations is consistently visible.
The behavior is significantly smoother with igniteui-angular@22.1.0-alpha.0
and HammerJS imported. It becomes visibly worse with
igniteui-angular@22.1.0-beta.0, where the list item uses the native touch
manager and HammerJS is no longer used.
The pronounced lag does not appear to be caused by replacing NgZone.onStable
with afterNextRender in IgxFor. Version 22.0.3 uses NgZone.onStable, while
22.0.4 uses afterNextRender; both versions use HammerJS and show no visible
difference in this test. Versions 22.1.0-alpha.0 and 22.1.0-beta.0 both use
afterNextRender, but the pronounced lag appears in beta.0, after HammerJS
was replaced with native gesture handling.
The regression therefore appears to be connected to the new native gesture
path, potentially the interaction between the list item's touch handling and
the virtual scroller's touch inertia handling.
Framework
Angular
Angular Version
22.0.8
Ignite UI for Angular Version
22.1.0-beta.0 and current master (22.1.x)
Component / Area
IgxListItemComponent, native touch gestures, IgxScrollInertiaDirective, and
IgxForOfDirective virtualization
Browser
Chrome and Edge on a touch-enabled device
Operating System
Windows
Command Not Working
Not applicable.
Steps to Reproduce
- Download and open the attached
virtual-for-touch-scroll-repro sample.
- Run
npm install and npm start.
- Open the application on a touch-enabled device. Alternatively, in Chrome,
open DevTools, enable the device toolbar, select a mobile device, and reload
the page.
- Press inside the virtualized list and drag vertically without releasing the
finger or mouse button.
- Observe the item movement while the touch gesture remains active.
- For comparison, stop the development server, use
igniteui-angular@22.1.0-alpha.0, install and import HammerJS, and restart
the development server.
- Repeat the same gesture.
Actual Result
With 22.1.0-beta.0, the rendered items stutter and visibly lag behind the
finger during a continuous vertical drag. The delay is substantially greater
than with the HammerJS-based implementation in 22.1.0-alpha.0.
Expected Result
The virtualized items should follow the finger smoothly during a continuous
vertical drag, with responsiveness comparable to the HammerJS-based
implementation.
Reproduction URL
Attached sample: virtual-for-touch-scroll-repro (public URL to be added).
Attachments
virtual-for-touch-scroll-repro.zip

Description
After HammerJS was replaced with native pointer and touch handling, continuously
dragging an
igxForvirtualized list with a finger became noticeably lessresponsive. While the finger remains in contact with the list, the rendered
items stutter and lag behind its movement.
The attached reproduction uses
IgxListItemrows inside anigxForviewport.It includes eager change detection and an impure filter over 100,000 records so
that the difference between the gesture implementations is consistently visible.
The behavior is significantly smoother with
igniteui-angular@22.1.0-alpha.0and HammerJS imported. It becomes visibly worse with
igniteui-angular@22.1.0-beta.0, where the list item uses the native touchmanager and HammerJS is no longer used.
The pronounced lag does not appear to be caused by replacing
NgZone.onStablewith
afterNextRenderinIgxFor. Version22.0.3usesNgZone.onStable, while22.0.4usesafterNextRender; both versions use HammerJS and show no visibledifference in this test. Versions
22.1.0-alpha.0and22.1.0-beta.0both useafterNextRender, but the pronounced lag appears inbeta.0, after HammerJSwas replaced with native gesture handling.
The regression therefore appears to be connected to the new native gesture
path, potentially the interaction between the list item's touch handling and
the virtual scroller's touch inertia handling.
Framework
Angular
Angular Version
22.0.8
Ignite UI for Angular Version
22.1.0-beta.0and current master (22.1.x)Component / Area
IgxListItemComponent, native touch gestures,IgxScrollInertiaDirective, andIgxForOfDirectivevirtualizationBrowser
Chrome and Edge on a touch-enabled device
Operating System
Windows
Command Not Working
Not applicable.
Steps to Reproduce
virtual-for-touch-scroll-reprosample.npm installandnpm start.open DevTools, enable the device toolbar, select a mobile device, and reload
the page.
finger or mouse button.
igniteui-angular@22.1.0-alpha.0, install and import HammerJS, and restartthe development server.
Actual Result
With
22.1.0-beta.0, the rendered items stutter and visibly lag behind thefinger during a continuous vertical drag. The delay is substantially greater
than with the HammerJS-based implementation in
22.1.0-alpha.0.Expected Result
The virtualized items should follow the finger smoothly during a continuous
vertical drag, with responsiveness comparable to the HammerJS-based
implementation.
Reproduction URL
Attached sample:
virtual-for-touch-scroll-repro(public URL to be added).Attachments
virtual-for-touch-scroll-repro.zip