ion-virtual-scroll: Handling Dynamic Item Size Changes After Render

Current behavior

ion-virtual-scroll, introduced in Ionic 4, renders only a subset of list items based on the viewport and a configurable buffer. The default buffer is 10 items beyond the visible area. The component supports both fixed‑height and variable‑height items, allowing an estimate or trackBy function to assist in positioning.

Common usage pattern

When paired with ion-infinite-scroll, new data chunks are appended as the user approaches the end of the list. The virtual scroll updates automatically, but the internal algorithm relies on the browser’s layout engine and does not detect subsequent size changes to items.

Unresolved decision

After initial rendering, if an item’s height changes—due to dynamic content, CSS updates, or user interaction—the virtual scroll does not automatically recalculate positions. The view may become misaligned until a manual refresh (e.g., calling refresh() or re‑initializing the component) is performed. The documentation does not specify whether this behavior is intentional or if there is an alternative approach.

Open questions

• Is there a built‑in mechanism for ion-virtual-scroll to detect and adjust to item height changes after rendering?
• Should developers rely on the onItemRendered event to trigger a refresh, or is there a more efficient strategy?
• What are the performance implications of repeatedly refreshing the virtual scroll for large datasets?