fix(igxGrid): Fix default scrollbars not showing on Mac when visible only on scroll. #7469

Author: skrustev

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -957,7 +957,6 @@
         width: 100%;
         background: --var($theme, 'header-background');
         z-index: 10001;
-        overflow: hidden;
     }
 
     %grid-thead-thumb {

projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts

@@ -40,7 +40,7 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
         document.body.appendChild(div);
         const scrollWidth = div.offsetWidth - div.clientWidth;
         document.body.removeChild(div);
-        return scrollWidth ? scrollWidth + 1 : 0;
+        return scrollWidth ? scrollWidth + 1 : 1;
     }
 
 }

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

@@ -222,7 +222,7 @@
         [style.width.px]="scrollWidth"></div>
 </div>
 
-<div class="igx-grid__scroll" #scr [hidden]="isHorizontalScrollHidden">
+<div class="igx-grid__scroll" [style.height.px]="scrollWidth" #scr [hidden]="isHorizontalScrollHidden">
     <div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
     <div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
         <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

@@ -181,7 +181,7 @@
         [style.width.px]="scrollWidth"></div>
 </div>
 
-<div class="igx-grid__scroll" #scr [hidden]="isHorizontalScrollHidden">
+<div class="igx-grid__scroll" [style.height.px]="scrollWidth" #scr [hidden]="isHorizontalScrollHidden">
     <div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
     <div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
         <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

@@ -155,7 +155,7 @@
         [style.width.px]="scrollWidth"></div>
 </div>
 
-<div class="igx-grid__scroll" #scr [hidden]="isHorizontalScrollHidden">
+<div class="igx-grid__scroll" [style.height.px]="scrollWidth" #scr [hidden]="isHorizontalScrollHidden">
     <div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
     <div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
         <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>