#14373·ag-grid

[Bug]: Fake horizontal scrollbar overlaps the last row with overlay (invisible) scrollbars — Firefox

Author: EugenoCreated Jul 9, 2026Updated Jul 9, 2026
Labelstriage

Link to reproducible scenario

https://www.ag-grid.com/examples/column-moving/moving-simple/angular/

Describe the bug

Steps to reproduce

  1. In Firefox, keep overlay/auto-hiding scrollbars on (default).
  2. Open any docs example that has a horizontal scrollbar.
  3. Observe the last visible row: its bottom edge is covered by a 16px band; the fake horizontal scroll sits on top of it.

Actual behaviour

The 16px invisible horizontal-scroll container is absolutely positioned over the last row, hiding the bottom of that row. Image

Expected behaviour

The horizontal scroll area should not overlap grid rows in any browser — it should reserve space (as with classic scrollbars in Chrome), or the 16px overlay should not cover row content. Image

Relevant source (ag-grid-community 36.0.0, main.esm.mjs)

  • this.invisibleScrollbar = _isInvisibleScrollbar(); — detects overlay scrollbars.
  • const adjustedScrollbarWidth = scrollbarWidth === 0 && invisibleScrollbar ? 16 : scrollbarWidth; — the hardcoded 16px when the measured width is 0.
  • refreshCompBottom() sets this.getGui().style.bottom = ... only when invisibleScrollbar is true — this is what makes the bar an absolute overlay rather than in-flow.

Workaround (for reference)

  • provideGlobalGridOptions({ scrollbarWidth: 10 }) to stop the hardcoded 16px, plus
  • CSS .ag-body-horizontal-scroll.ag-scrollbar-invisible { position: static; } to move the bar back into flow.

Version

36.0.0

Does the issue occur for a specific framework only?

All languages

Is the issue only observable on a specific browser?

Firefox