CODEWITHSUNDEEP
htmlcsswebbackground
Skorpius
Skorpius

Reputation: 2255

How to stop the white from appearing when scrolling down on an html page?

enter image description here

I have a gradient background in an html document defined as such in CSS:

body {
    /*background-color: #1A0F0F;*/
    /*color: #D7D7D7;*/
    /*height: 100%;*/ /* come back to this */
    margin: 0;
    background: -webkit-linear-gradient(green, black); 
    background: -o-linear-gradient(green, black); 
    background: -moz-linear-gradient(green, black); 
    background: linear-gradient(green, black);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

The background gradient is definitely there, but it does this annoying thing where when I scroll, the gradient disappears on the bottom rectangle and it is just white- Specifically, this is on a Mac opening up the document on Google Chrome but it also seems to happen on Safari.

Any ideas what would be causing this?

Upvotes: 6

Views: 4553

Answers (2)

Morgan Feeney
Morgan Feeney

Reputation: 897

I just came across this issue, after some googling I saw this codepen: https://codepen.io/kidd1118/pen/qxQwvE and decided to have a go at something similar myself.

Ultimately, using a fixed element helps, in this case I applied the same gradient to a fixed pseudo element and fixed it to the top with 100% height and width, with a lower z-index.

This works great on Chrome 108.0.5359.124 on my Mac, and IOS Safari 16.0 on my iPhone, however the issue persists on desktop Safari 16.0

html {
  box-sizing: border-box;
  position: relative;

  &::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--body-gradient);
    z-index: -1;
  }
}

body {
  background: var(--body-gradient) no-repeat;
}

Upvotes: 1

gpmcadam
gpmcadam

Reputation: 6560

The reason this is happening is because of overscroll (or "elastic scrolling") in OSX.

You can't give the overscroll area, which defaults to white, a gradient colour. But you can however style it with a solid colour.

Simply set the background property to style the overscroll area, and use background-image to set your gradient, like so:

body {
    background: black;
    background-image: linear-gradient(black, green);
}

This is a bit of a hack and unfortunately only really helps with either the top or the bottom of the page, but should look less jarring than white.

It's worth noting that this is only a requirement in Google Chrome, Safari should respect the background gradient during overscroll.

Upvotes: 3

Related Questions