Kevin Powell - Community•14mo ago

weird white gap on the bottom while scrolling down mobile

Hi! So I was wrapping up this screen when I started testing it on mobile. As you can see, when sliding down, this weird white gap appears as long as I hold on to the slide. When letting it go, it goes back to normal. This is how I have implemented the background:

body {
  background: linear-gradient(to bottom right, #12384c 0%, #161c24 60%);
  background-attachment: fixed;
}

body {
  background: linear-gradient(to bottom right, #12384c 0%, #161c24 60%);
  background-attachment: fixed;
}

13 Replies

Anksio•14mo ago

is this a scrollview? or have you tried overflow y hidden

Mannix•14mo ago

maybe try setting the background on html element

ademondev•14mo ago

What's a scrollview? It's all React web I'll try that Didn't work 🥲

kirin-808•14mo ago

You could try to add overscroll-behavior-y: contain on the body

Anksio•14mo ago

yeah nvm i read it as react native by mistake have you given it a fixed height

ademondev•14mo ago

Thanks for the suggestion, unfortunately it doesn't seem to work Yeah I've tried that too, for some reason it didn't change anything Oh my god, finally Ok, so this is what fixed it for me

html {
  scroll-behavior: smooth;
  overflow: hidden;
}

body {
  background: linear-gradient(to bottom right, #12384c 0%, #161c24 60%);
  background-attachment: fixed;
  overflow: auto;
}

html {
  scroll-behavior: smooth;
  overflow: hidden;
}

body {
  background: linear-gradient(to bottom right, #12384c 0%, #161c24 60%);
  background-attachment: fixed;
  overflow: auto;
}

Half a day on this, my god

snxxwyy•14mo ago

i don't believe you need all the overflow properties and such, you can simply do something like this, https://codepen.io/deerCabin/pen/abPKqva

ἔρως•14mo ago

please, dont do that set the body to have an height of 100%, and the html an height of 100dvh that should do it

snxxwyy•14mo ago

hm i've heard of a lot of different versions of that, i guess it's whatever method floats your boat really and what fits the project.

ademondev•14mo ago

I'll test it tomorrow! If that works, perfect The only trouble I'm having is on mobile though

snxxwyy•14mo ago

alrighty, good stuff yeah that should work on mobile too although i set it to have a min-width of 22rem so that might cause a scrollbar on mobile haha, don't need to add that in your project though, it was just placeholder code, your content will decide the width.

Chimi•14mo ago

Looks similar to Andy Bell’s CSS reset, I like your solution 🙂👍

snxxwyy•14mo ago

yeah i've checked his work out a few times, thank you but can probably be improved haha

Gaming

Programming

weird white gap on the bottom while scrolling down mobile