Skip to content

IgxList with IgxFor virtualization lags during continuous touch scrolling #17470

Description

@viktorkombov

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

  1. Download and open the attached virtual-for-touch-scroll-repro sample.
  2. Run npm install and npm start.
  3. 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.
  4. Press inside the virtualized list and drag vertically without releasing the
    finger or mouse button.
  5. Observe the item movement while the touch gesture remains active.
  6. For comparison, stop the development server, use
    igniteui-angular@22.1.0-alpha.0, install and import HammerJS, and restart
    the development server.
  7. 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

Image Image

Metadata

Metadata

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions