igxGrid — Rows randomly clipped/cut off during vertical scroll when horizontal scrollbar is present

[NomanYaqoob]

Description:

When an igx-grid has enough columns to cause horizontal overflow (horizontal scrollbar visible), rows get randomly clipped during vertical scrolling. Some rows render at partial height or are completely invisible until the user scrolls past them and back.

Version: @infragistics/igniteui-angular 21.2.7

Angular version: 21.x

Browser: Chrome (latest), also reproducible in Firefox/Safari

---

Steps to reproduce:

1. Create a bare igx-grid with height="100%", width="100%", and 100 rows of data
2. Add 6+ columns with default widths (enough for total column width to exceed the viewport, triggering horizontal scroll)
3. Scroll down vertically
4. Observe: rows are randomly clipped — some show at partial height, some are skipped entirely

Key condition: The bug only occurs when a horizontal scrollbar is present. Reducing columns so everything fits within the viewport (no horizontal scroll) eliminates the issue entirely.

---

Minimal reproduction:

@Component({
  selector: 'app-grid-repro',
  standalone: true,
  imports: [IgxGridComponent, IgxColumnComponent],
  template: `
    <igx-grid [data]="data" [autoGenerate]="false" primaryKey="id" height="100%" width="100%">
      <igx-column field="id" header="ID"></igx-column>
      <igx-column field="col1" header="Column 1"></igx-column>
      <igx-column field="col2" header="Column 2"></igx-column>
      <igx-column field="col3" header="Column 3"></igx-column>
      <igx-column field="col4" header="Column 4"></igx-column>
      <igx-column field="col5" header="Column 5"></igx-column>
      <igx-column field="col6" header="Column 6"></igx-column>
      <igx-column field="col7" header="Column 7"></igx-column>
      <igx-column field="col8" header="Column 8"></igx-column>
      <igx-column field="col9" header="Column 9"></igx-column>
    </igx-column>
  `,
  styles: [`:host { display: block; height: 100%; width: 100%; }`],
})
export class GridReproComponent {
  data = Array.from({ length: 100 }, (_, i) => ({
    id: i + 1,
    col1: `Value ${i}`, col2: `Data ${i}`, col3: `Item ${i}`,
    col4: `Record ${i}`, col5: `Entry ${i}`, col6: `Field ${i}`,
    col7: `Cell ${i}`, col8: `Row ${i}`, col9: `Col ${i}`,
  }));
}

Host the component in a container with a defined height (e.g., router outlet with height: 100%).

---

Expected behavior:
All rows render at full consistent height during vertical scrolling regardless of horizontal scroll state.

Actual behavior:
Rows are randomly clipped/cut off. The issue is inconsistent — different rows may be affected on each scroll interaction.

---

What I've ruled out:

• Not caused by custom directives, wrappers, or cell templates
• Not fixed by setting explicit [rowHeight]
• Not related to autoGenerate, autosizing, or paginator
• Occurs with a completely bare igx-grid + [data] binding
• Only trigger: total column width > viewport width (horizontal scrollbar visible)

---

Possibly related issues:

• When igxGrid is autosized vertically and contains exactly 10 records, the last record is not fully visible #4931 — "Rendered and predefined heights of the rows is different which leads to all kinds of desyncs"
• igx-grid: Incorrect height calculation when setting height in percent and binding empty data. #3950 — "The grid miscalculates its height"
• If use igx-grid-footer, the bottom row of igxGrid is not visible. #7602 — Bottom row not visible when grid-footer is used

---