chore(*): Fix by calculating border separately.

Author: MKirova

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -3363,7 +3363,8 @@ export abstract class IgxGridBaseDirective implements GridType,
     private _sortAscendingHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
     private _sortDescendingHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
     private _gridSize: Size = Size.Large;
-    private _defaultRowHeight = 51;
+    private _defaultRowHeight = 50;
+    private _borderSize = 1;
     private _rowCount: number;
     private _cellMergeMode: GridCellMergeMode = GridCellMergeMode.onSort;
     private _columnsToMerge: IgxColumnComponent[] = [];
@@ -5620,7 +5621,7 @@ export abstract class IgxGridBaseDirective implements GridType,
      */
     protected get defaultTargetBodyHeight(): number {
         const allItems = this.dataLength;
-        return this.renderedRowHeight * Math.min(this._defaultTargetRecordNumber,
+        return this.renderedActualRowHeight * Math.min(this._defaultTargetRecordNumber,
             this.paginator ? Math.min(allItems, this.paginator.perPage) : allItems);
     }
 
@@ -5629,7 +5630,10 @@ export abstract class IgxGridBaseDirective implements GridType,
      * The rowHeight input is bound to min-height css prop of rows that adds a 1px border in all cases
      */
     public get renderedRowHeight(): number {
-        return this.rowHeight;
+        if (this.hasCellsToMerge) {
+            return this.rowHeight;
+        }
+        return this.rowHeight + this._borderSize;
     }
 
     /**
@@ -7867,6 +7871,10 @@ export abstract class IgxGridBaseDirective implements GridType,
         this.gridScroll.emit(args);
     }
 
+    protected get renderedActualRowHeight() {
+        return this.rowHeight + this._borderSize;
+    }
+
     private executeCallback(rowIndex, visibleColIndex = -1, cb: (args: any) => void = null) {
         if (!cb) {
             return;
@@ -8130,12 +8138,19 @@ export abstract class IgxGridBaseDirective implements GridType,
 
     protected updateDefaultRowHeight() {
         if (this.dataRowList.length > 0 && this.dataRowList.first.cells && this.dataRowList.first.cells.length > 0) {
-            const height = parseFloat(this.document.defaultView.getComputedStyle(this.dataRowList.first.nativeElement)?.getPropertyValue('height'));
+            const height = parseFloat(this.document.defaultView.getComputedStyle(this.dataRowList.first.cells.first.nativeElement)?.getPropertyValue('height'));
             if (height) {
                 this._defaultRowHeight = height;
             } else {
                 this._shouldRecalcRowHeight = true;
             }
+
+            const rowStyles = this.document.defaultView.getComputedStyle(this.dataRowList.first.nativeElement);
+
+            const border = rowStyles.borderBottomWidth ? parseFloat(rowStyles.borderBottomWidth) : 1;
+            if (border) {
+                this._borderSize = border;
+            }
         }
     }
 

projects/igniteui-angular/src/lib/grids/grid/grid.component.ts

@@ -1281,7 +1281,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      */
     protected override get defaultTargetBodyHeight(): number {
         const allItems = this.totalItemCount || this.dataLength;
-        return this.renderedRowHeight * Math.min(this._defaultTargetRecordNumber,
+        return this.renderedActualRowHeight * Math.min(this._defaultTargetRecordNumber,
             this.paginator ? Math.min(allItems, this.perPage) : allItems);
     }