我在设计需要100%屏幕高度的Web应用程序时遇到了一个问题，使用Safari for Mac中的CSS height: 100vh。
每次我打开一个新的标签，并返回到网络应用程序标签，它不会调整大小，以考虑到浏览器现在有大约24px的空间少，因为标签栏。
有什么想法来处理这个问题吗？
代码示例：
- 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>- CSS文件：*
html,
body {
margin: 0;
}
.app {
position: relative;
height: 100vh;
background-color: lightgray;
}
.toolbar {
position: absolute;
bottom: 0;
width: 100%;
background-color: grey;
}**更新：**添加测试代码。目前在莫哈韦10.14.3上的Safari 12.0.3上发生
1条答案
按热度按时间58wvjzkj1#
我无法在macOS Ventura 13.2.1上使用Safari 16.3重现该问题。看起来该问题可能已修复。我用于测试的Here is the page。
然而，当在现有窗口的新选项卡中打开此页面，然后将选项卡拖动到新窗口时，我仍然看到一个问题。在这种情况下，视口变大，因此按钮不再位于底部，而是在下面有额外的空间。