Prevent image from being overscrolled

Question

I have a question, which I don't even know how to google. I set a two-row layout. On the left side is a container with a background image, which is fixed:

.image {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-image: url('/splash_1.png');
  background-size: contain;
  background-attachment: fixed;
 }

This works so far so good. But when i scroll the page (in my case on my macbook with the trackpad) like a "swipe up" or "swipe down" (as done in mobiles to reload a page), the image scrolls too and leaves a white space.

To explain it better, I recorded the screen in following animated Gif:

Is there a way to prevent this from happening?

Answer 1

Try this CSS propert overscroll-behavior: contain;.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior