Safari for Mac 标签菜单栏高度问题

Question

Safari for Mac 标签菜单栏高度问题

我在使用height: 100vhSafari for Mac 中的 CSS 设计需要 100% 屏幕高度的 Web 应用程序时遇到问题。

每次我打开一个新选项卡并返回到 Web 应用程序选项卡时，考虑到由于选项卡栏，浏览器现在的空间减少了大约 24 像素，因此不会调整大小。

任何想法来处理这个问题？

代码示例：

HTML文件：

<html>
<head>
    <title>Safari Bug</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="app">
        <h1>Safari bug instructions</h1>
        <ol>
            <li>Close all tabs in Safari except this page. (You will see a dark bar at the bottom with buttons)</li>
            <li>Open a new tab.</li>
            <li>Return to the tab. (If the bug appear, you no longer will see the buttons withouth scrolling)</li>
        </ol>
        <p></p>
        <nav class="toolbar">
            <button>Button 1</button>
            <button>Button 2</button>
            <button>Button 3</button>
        </nav>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

CSS文件：

html,
body {
    margin: 0;
}
.app {
    position: relative;
    height: 100vh;
    background-color: lightgray;
}

.toolbar {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: grey;
}

Run Code Online (Sandbox Code Playgroud)

更新：添加了测试代码。目前在 Mojave 10.14.3 上的 Safari 12.0.3 上发生

Answer 1

Bre*_*ald 0

我无法在 macOS Ventura 13.2.1 上使用 Safari 16.3 重现该问题。看起来问题可能会得到解决。这是我用于测试的页面。

但是，在现有窗口的新选项卡中打开此页面，然后将选项卡拖到新窗口时，我仍然遇到问题。在这种情况下，视口变得更大，因此按钮不再位于底部，而是在下面有额外的空间。

归档时间：	6 年，12 月前
查看次数：	412 次
最近记录：	6 年，12 月前