Angular Mat Ink Bar / Bar Below Tab is Occasionally Not Centered

Note: I've already reviewed the question and answers at Ink bar under centered tabs not being aligned properly when opening sidenav using Angular Material but this did not help me arrive at a solution.

It seems that at random times I am seeing the bar below an Angular Material Tab (called the mat ink bar) not being centered:

But then if I refresh the page it's fine:

I have the following in my .scss file related to the mat tabs:

/* Styles for the **active** tab label */
.mat-tab-label.mat-tab-label-active {
    opacity: 1 !important;
    color: black !important;
} 

/* Styles for the ink bar */
.mat-ink-bar {
    // transition: none !important;
    transition-duration: 250ms !important;;
   
}
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar{
    background-color: #0076C0;
    background: #0076C0;
} 
.remove-border-bottom .mat-tab-header {
    border-bottom: none;
}

And the following html for the tab group / tab:

    <mat-tab-group #tabs class="remove-border-bottom" dynamicHeight [selectedIndex]="this.indexOfFirstSessionInNewlyOpened" animationDuration="0ms" (selectedTabChange)="onSessionTabChanged($event)" disableRipple="true">
        <ng-container *ngFor="let session of openedSessionsData">
            <mat-tab style="overflow-y: hidden !important;" ​>
               ...
            </mat-tab>
        </ng-container>
    </mat-tab-group>