chore(*): Fix issue with wrong size caches being used due to sync service.

Author: MKirova

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -1427,6 +1427,9 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
         this.igxForOf = value;
     }
 
+    @Input()
+    public igxGridForOfUniqueSizeCache = false;
+
     public get igxGridForOf() {
         return this.igxForOf;
     }
@@ -1436,7 +1439,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
      * @internal
      */
     public get sizesCache(): number[] {
-        if (this.syncService.isMaster(this)) {
+        if (this.igxGridForOfUniqueSizeCache || this.syncService.isMaster(this)) {
             return this._sizesCache;
         }
         return this.syncService.sizesCache(this.igxForScrollOrientation);

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

@@ -165,7 +165,7 @@
     <div [style.max-height.px]='maxContainerHeight'>
         <div class="igx-grid-thead__group" *ngFor='let dimLevelColumns of columnDimensionsByLevel' [style.width.px]='grid.unpinnedWidth'>
             <ng-template igxGridFor #headerVirtualContainer let-column
-                [igxGridForOf]="dimLevelColumns" [igxForScrollContainer]="grid.parentVirtDir"
+                [igxGridForOf]="dimLevelColumns" [igxGridForOfUniqueSizeCache] = 'true' [igxForScrollContainer]="grid.parentVirtDir"
                 [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges"
                 [igxForSizePropName]="'calcPixelWidth'" [igxForScrollOrientation]="'horizontal'">
                 <igx-grid-header-group [ngClass]="column.headerGroupClasses"