Bootstrap modal backdrop show in front of the modal after recent chrome update

Chrome version: Version 111.0.5563.64 (Official Build) (x86_64) Bootstrap: 4.3.1

Recent chrome update has make the modal backdrop show in front of the modal itself. I have checked is not the issue of z-index, not sure what have cause this.

.modal-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: 1040;
width: 100vw;
height: 100vh;
background-color: #000;
}


.modal {
position: fixed;
top: 0;
left: 0;
z-index: 1050;
display: block;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
outline: 0;
}


<div class="modal fade" id="aboutUs" tabindex="-1" role="dialog" aria-labelledby="aboutUsModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ property.othersPopupTitle | translate: langPreference }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<a (click)="tncOnClick()" class="select-wrapper">
<label>{{ property.tnc | translate: langPreference }}</label>
</a>

<a class="select-wrapper" href="{{'tel:'+ contactUs}}" *ngIf="isMobileDevice">
<div class="select-icon"></div>
<label>{{ property.contactUs | translate: langPreference }}</label>
</a>
</div>
</div>
</div>
</div>
</div>

Continue reading...