Почему заголовок мобильной навигации пропадает на 0,1 секунды при открытии или закрытии (отключена фоновая прокрутка)? ⇐ CSS

[Anonymous]

Я пытаюсь разработать мобильную навигацию, которая отключает фоновую прокрутку и при этом остается в прокрученном положении пользователя. Когда он открыт, он сохраняет положение пользователя и устанавливает высоту тела, содержимого и навигации на 100svh (- высота панели навигации), поэтому не возникает проблем с нижними панелями (например, в Safari iOS). Кроме того, контент не прокручивается, поэтому проблем с прокруткой в ​​навигации не возникнет.
В принципе все работает как надо, кроме одного. Я заметил белое мигание панели навигации после нажатия на нее. Получается, что он "пропадает" примерно на 0,1 секунды. Я тестировал его на своем iPhone в Safari, Firefox и Chrome. Конечно, могут быть и более серьезные проблемы, но это не совсем чисто.

Код: Выделить всё

function navigation(){

var navheaderheight = document.getElementById("navclick").clientHeight;
var status = document.getElementById("status");
var userposition = document.getElementById("userposition");
var content = document.getElementById("contentid");
var navigationbox = document.getElementById("shownbox");
var body = document.getElementById("bodyid");

if (document.getElementById("status").value == 0){
var scrolled = this.scrollY;
userposition.setAttribute("value", scrolled)
status.setAttribute("value", 1);
content.classList.toggle("togglecon");
navigationbox.classList.toggle("togglenav");
body.classList.toggle("togglebod");
var heightmaincontent = "calc(100svh - " + navheaderheight + "px + " + scrolled + "px)";
content.style.height = heightmaincontent;
var topmaincontent = "-" + scrolled + "px";
content.style.top = topmaincontent;
}
else{
status.setAttribute("value", 0);
body.classList.toggle("togglebod");
navigationbox.classList.toggle("togglenav");
content.classList.toggle("togglecon");
content.style.height = "auto";
content.style.top = "auto";
window.scrollTo(0, userposition.value);
userposition.value = 0;
}
}

Код: Выделить всё

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Helvetica;
font-size: 18px;
-webkit-user-select: none;
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.navigation{
width: 100%;
top: 0;
position: sticky;
position: -webkit-sticky;
z-index: 200;
touch-action: manipulation;
opacity: 0.85;
}
.navigation-click{
height: 80px; /* Height of the mobile navigation bar */
background-color: black;
padding-top: 25px;
}
.icon{
width: 30px;
height: 30px;
background-color: red;
margin-left: calc(50% - 15px);
}

.navigation-box{
width: 100%;
background-color: black;
position: absolute;
height: 0;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
transition: 0.5s all;
}
.content{
padding: 40px;
line-height: 1.6;
position: relative;
z-index: 100;
}
.togglenav{
height: calc(100svh - 80px);
}
.togglebod{
height: 100svh;
overflow: hidden;
}
.togglecon{
height: calc(100svh - 80px);
overflow: hidden;
}

Код: Выделить всё

 At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Подробнее здесь: https://stackoverflow.com/questions/784 ... s-when-ope