Mobile Scrolling Bug

user_18163967 0
Viewed 112

I was developing a small one page next app when I discovered a "bug".
And I don't know how to fix it. Mobile Screen

Link to the site: Preview

Current behaviour:
Screen Glitches when scrolling on mobile.

Expected behaviour:
No white space on the bottom part

Steps to reproduce:

  1. Scroll up until the Chrome header hides
  2. The white space appears on the bottom while the header fades away

For some reason it glitches when scrolling. I tried setting the body to calc(100vh + 60px) (Header height)

But this doesn't fix the behavior.

Short snippet:

<main>
  <section className={'wrapper'}/>
  <section className={'wrapper'}/>
  <section className={'wrapper'}/>
  <section className={'wrapper'}/>
<main>

the corresponding CSS:

body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  background-attachment: fixed;
  animation: gradient 15s ease infinite;
  height: calc(100vh + 60px);
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
main {
  min-height: 100vh;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wrapper {
  height: calc(100vh - 100px);
  width: 100%;
  max-width: 1000px;
  padding-top: 80px;
}

The white space in the picture linked above fixes itself after the scroll. It matches the height of the Chrome header It seems that the Chromeheader does not affect the height: 100vh Is my CSS wrong or is it a Bug?

I use a OnePlus 6 OxygenOS 11.1.2.2 Chrome: 98.0.4758.87

next.js reactjs css
1 Answers

If the header is fixed, you don't need make the calc, Even if the header if not fixed, you have to subtract and not add.

try it:

body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  background-attachment: fixed;
  animation: gradient 15s ease infinite;
  height: 100vh;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
main {
  min-height: 100vh;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wrapper {
  height: calc(100vh - 100px);
  width: 100%;
  max-width: 1000px;
  padding-top: 80px;
}
user_137208760
Related