I'm facing an issue where a transformed div is overlapping a bootstraped navbar, particularly in Safari as shown below. Can anyone shed some light on why this might be happening?
This issue seems to occur only in Safari and not in Firefox or Chrome. Additionally, the problem doesn't arise when there are no transforms applied to the div.
The tools I'm using include Bootstrap 4 and tailwind.css. I have shared the code snippet below for reference. Appreciate any help, thank you.
If needed, here is a link to the illustration: https://i.sstatic.net/zdrik.gif
<head>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<nav class="navbar w-100 navbar-expand-md navbar-light bg-warning fixed-top " style="background-color: #eee;">
<a class="navbar-brand" href="">
Logo
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav w-100">
<a href="" class="effect3 nav-item nav-link">nav item</a>
</div>
</div>
</nav>
<br><br><br><br><br><br><br>
<body>
<div class="column p-0 place-self-center">
<div class="card bg-transparent border-0 ">
<div class="w-50 border-2 border-yellow-400 rounded-t-lg rounded-b-lg h-96 bg-dark pb-0" style="transform: perspective(150rem) rotateY(-25deg); box-shadow: 10px 10px 40px #888888;"></div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>