Firefox Mobile and height 100vh

Question

In Firefox Mobile, I see twitching when I scroll the page up and down, if the block has a height of 100vh. Is it possible to fix this effect?

html, body 
{ 
padding: 0; margin: 0; 
} 

.block 
{ 
height: 100vh; 
background: blue; 
}

My html

<!DOCTYPE html>
<html lang="en"> 
<head> 
<title>Тест</title> 
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
</head>

<body> 
<div class="block"></div> 
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</body>
</html>

Answer 1

I tried to replicate this through Codepen and didn't saw any twitches. Nice & smooth. But then I deployed it on GitHub Pages — it indeed twitching . My initial thoughts were that they (Codepen) probably adding something to the head section, but I didn't find anything there.

But, what is the difference between the two? First doesn't affect the address bar while another does. The reason behind this is that Codepen launches your page inside an iframe, therefore it doesn't trigger the scroll.

So now our objective is to find a way to "freeze" the address bar.

We can do this by wrapping everything inside the body in a div:

<body>
  <div id="wrapper">
    ...
  </div>
</body>
</html>

Then adding this to our CSS:

@-moz-document url-prefix() {
  #wrapper {
    height: 100vh; 
    overflow-y: scroll;
  }
}

Since other browsers don't have problems with animation of the address bar we are using this firefox-only property for our css.

Here you go. Nice & smooth .

Firefox Mobile and height 100vh

Question

1 answers

solution1
2 ACCPTED 2020-06-01 22:42:05

Firefox Mobile and height 100vh

Question

1 answers

solution1 2 ACCPTED 2020-06-01 22:42:05

solution1
2 ACCPTED 2020-06-01 22:42:05