[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
- In Firefox, keep overlay/auto-hiding scrollbars on (default).
- Open any docs example that has a horizontal scrollbar.
- 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.
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.
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()setsthis.getGui().style.bottom = ...only wheninvisibleScrollbaris 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
Source: ag-grid/ag-grid