У меня проблема с проектированием веб-приложений, для которых требуется 100% высота экрана с использованием CSS height: 100vh в Safari для Mac.
Каждый раз, когда я открываю новую вкладку и возвращаюсь на вкладку веб-приложения, онане изменяет размер, чтобы учесть, что браузер теперь имеет примерно на 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>
Файл CSS:
html,
body {
margin: 0;
}
.app {
position: relative;
height: 100vh;
background-color: lightgray;
}
.toolbar {
position: absolute;
bottom: 0;
width: 100%;
background-color: grey;
}
Обновлено: Добавлен тестовый код.В настоящее время происходит на Safari 12.0.3 на Мохаве 10.14.3