How to correctly disable elastic scrolling in both chrome and safari once and for all

This is beyond frustrating at this point.

Why is there no simple way for disabling the elastic, overscroll behavior in both Safari and Chrome on mobile devices reliably and correctly that will not cause other problems which i have outlined below?

All solutions offered on stack overflow, while successfully disable overscrolling, create a flickering problem which is not yet solved, at least not here on stack.

First let me just say that using the 3D property Hacks, in combination with position fixed, which are commonly offered as a solution on stack overflow do not work as a solution to the flickering in this case, and neither does using the prevent default method via Javascript to stop scrolling on the base container.

The elegant, beautiful and relatively new CSS property overscroll-behavior theoretically is the correct solution for what i am about to explain, but since Apple has decided to follow in the footsteps of IE long since past and not embrace an accepted standard, we can not use it because of Safari's existence.

So I am asking this question below regardless of all existing similar questions because none have answers that solve this problem.

The code:

CSS:

    body {
     position: fixed;
     width: 100%;
     height: 100%;
     padding: 0;
     margin: 0;
     background-color: #555;
    }

    .base-container {
     position: fixed;
     width: 100%;
     height: 100%;
     padding: 0;
     margin: 0;
     background-size: cover;
     background-image: url(http://getwallpapers.com/wallpaper/full/c/8/0/686620.jpg);
    }
    .scroll-container {
     position: fixed;
     padding: 0;
     margin: 0;
     width: 100%;
     height: 100%;
     -webkit-overflow-scrolling: touch;
     overflow-y: scroll;
     overflow-x: hidden;
    }

    .header {
     position: relative;
     height: 40px;
     width: 100%;
     color: #fff;
     background-color: #000;
    }

    .header.fixed {
      position: fixed;
      top: 0;
    }

HTML:

<body>
 <div class="base-container">
  <div class="scroll-container">
   <p> a long set of paragraphs here <p>
   <p> a long set of paragraphs here <p>
   <div class="header fixed">
     <span>This is my header</span>
   </div>
   <p> a long set of paragraphs here <p>
   <p> a long set of paragraphs here <p>
  </div>
 </div>
</body>

The problem:

fiddle: https://jsfiddle.net/o2zngpf4/8/

Try that fiddle on a mobile device and watch the header flicker when you scroll.

Key to all of this and the cause of the flickering problem is the fact that my base container that is using postion fixed has a background image. This background image i believe is what is causing the flickering problem i outline below.

Using the property position: fixed; works to prevent the elastic overscroll behavior, but causes my fixed header div contained within my scrollable container to flicker while scrolling on mobile devices.

Conversely, using position: absolute; in the body and containers works to stop the header from flickering, but does not disable elastic overscrolling.

Please note that moving my header outside of the scrollable container is not a solution either. I have simplified the code above for quick reading, but my application is far more complex and requires a fixed div to exist inside of my scrollable container. The example i outline here creates the same flickering problem, so the example here should suffice.

And, as mentioned above, including the following properties in my header class and or containers do not work to stop flickering either:

-webkit-perspective: 1000;
        perspective: 1000;
-webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);

Nor does event.preventDefault() work, since applying this to the body and or containers in this case disables scrolling all together, and i can not help but feel like complicating that javascript in-order to detect scroll position at the top or bottom is an ugly solution just so that i can use absolute positioning instead of fixed.

So, with all that said, anyone at all have another answer? At this point, i for one am incredibly angry and practically ready to give up.