This Image is for Chrome this image is for safari
As u can see there is clear over lapping for header that's in red color written as mojo, in chrome its working but in safari its not I am attaching my code can any one help how to fix in safari.
I am using vue
please find the image attached above for clear understanding.
.ms-dialog__body {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.ms-dialog__content {
position: absolute;
max-height: 100%;
background-color: white;
width: calc(100% - 30px);
top: 200px;
left: $t-marg__pad * 1.5;
border-radius: $t-marg__pad;
z-index: 2;
}
.ms-dialog__cross {
position: absolute;
top: 190px;
z-index: 10;
right: 5px;
}<template>
<div v-if="isOpen" class="ms-dialog__body">
<img
class="ms-dialog__cross"
src="@/assets/images/icons/crossbtn-red.svg"
@click="close"
/>
<div class="ms-dialog__content">
<slot></slot>
</div>
</div>
</template>