Bootstrap 在 Safari 中使用变换的导航栏重叠

Question

我正在努力解决转换后的 div 重叠 bootstraped 导航栏的问题，如下图所示。有谁知道为什么会这样？

它发生在 safari 中，但不是在 Firefox 或 Chrome 中。当没有对 div.

应用任何变换时，也不会发生这种情况

我正在使用 bootstrap 4 和 tailwind.css。我已经包含了下面的代码。谢谢

感谢任何指点，谢谢。

<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>

Answer 1

你能检查一下下面的代码吗link？希望它对你有用。您必须在父元素 .place-self-center 及其子元素 .place-self-center .bg-transparent.

中添加 position 和 z-index

请参考这个link：https://jsfiddle.net/yudizsolutions/Lj482t1p/2/

Bootstrap 在 Safari 中使用变换的导航栏重叠

Bootstrap Navbar overlap using transforms in Safari

html

css

frontend

css-transforms

bootstrap-4