Angular Material cdk Overaly issue with chrome z-index after latest chrome update (Version 111.0.5563.65)

Question

I have a scenerio where I open angular material dialog which opens up cdk-overlay (usual behavior). with their buit-in z-index and position properties.

I want to show ngx-spinner on top of that dialog, when I do a service call no matter what.

CURRENT ISSUE (Working fine in firefox and Edge):

It shows the spinner spinning behind the dialog container. Setting the cdk-overlay || mat-dialog-container being top of my custom class's index whose values are being setted to 50000.

REQUIREMENT:

I want the spinner class on top of everything in my app.

HTML Code:

<div class="disabledBackground min-vh-100 w-100" *ngIf="disableBackgroundIndicator">
  <td class="countDownTimer" *ngIf="countdownTimer.showHide">
    <h2>{{countdownTimer.countDownTimer()}}</h2>
  </td>
</div>
<ngx-loading-bar color="#ff0000"></ngx-loading-bar>
<router-outlet></router-outlet>
<div>
  <app-footer-smart></app-footer-smart>
</div>

CSS Code:

.disabledBackground {
  background-color: #bfbaba;
  z-index: 50000;
  opacity: 0.4;
  position: fixed;
  height: 100vh;
  width: 100vw;
}

ISSUE:

Png: issue

Requirement:

Png: output needed