Search code examples
htmlcssbootstrap-4frontendcss-transforms

Bootstrap Navbar overlap using transforms in Safari

I'm struggling with the problem of a transformed div overlapping a bootstraped navbar, illustrated below. Does anyone know why this could be happening?

It happens in safari but not in Firefox or Chrome. It also doesn't happen when there are no transforms applied to the div.

I'm using bootstrap 4 and tailwind.css. I've included the code below. Thanks.

Grateful for any pointers, thanks.

enter image description here

<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><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><br><br>
</body>
Solution

  • Can you please check the below code link? Hope it will work for you. You have to add position and z-index in the parent element .place-self-center and its child element .place-self-center .bg-transparent.

    Please refer to this link: https://jsfiddle.net/yudizsolutions/Lj482t1p/2/