🫤 The overscroll is opposite of the linear-gradient background-image of this page!

Expected: Blue overscroll at the top, green at the bottom.

Actual: Green overscroll at the top, blue at the bottom.

Edit: A human probably expects the above intuitively, but there is an explanation which makes sense once you know it. It’s all about background-repeat. The default is to repeat the background, so you can think of it as there being another screenful of gradient above and below the page. When you overscroll up, you see the bottom of the “screen” above, and when you scroll down, you see the top of the “screen” below. Which is why it feels like the opposite color is used. If you turn off background-repeat, the overscroll color is white.

background-repeat demonstration

no-repeat demonstration

Next test