使用 Safari 中的转换引导导航栏重叠

Posted

技术标签:

【中文标题】使用 Safari 中的转换引导导航栏重叠【英文标题】：Bootstrap Navbar overlap using transforms in Safari 【发布时间】：2021-04-22 23:24:10 【问题描述】：

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

它发生在 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>

【问题讨论】：

这是导致问题的rotateY()。我只是不知道如何绕过它。 【参考方案1】：

你能检查下面的代码链接吗？希望它对你有用。您必须在父元素.place-self-center 及其子元素.place-self-center .bg-transparent 中添加position 和z-index。

请参考此链接：https://jsfiddle.net/yudizsolutions/Lj482t1p/2/

【讨论】：

这太棒了，非常感谢。知道如何保持在 div 内滚动的能力。现在将 z-index 设置为 -1 意味着它将失去滚动。 公平地说，这可能是一个单独的问题，但我已经将这个问题包含在一个小提琴中：jsfiddle.net/86q70sbj 我们已根据您的要求更新了我们的代码。你能检查更新的代码链接吗？

以上是关于使用 Safari 中的转换引导导航栏重叠的主要内容，如果未能解决你的问题，请参考以下文章

引导导航栏菜单与文本重叠

移动 safari 和 iOS 11：导航栏重叠的 Web 应用程序和全高 (100vh)

让导航栏与iOS 7中的状态栏重叠

无法在移动/ipad 浏览器上浮动 twitter 引导导航栏

如何在使用页面锚导航时将“激活”类设置为 Angular 2 中的引导导航栏？

如何使用引导程序更改导航栏中的过渡动画？