repeating-linear-gradient stops repeating on high height containers on mobile Chrome and Brave

Question

Noticed the following behavior on Mobile Chrome and Mobile Brave on an Android device (probably iOS too):

As shown by example, I have this div with height that is 39000px. At some point after about 2/3 of scroll height has been scrolled you can notice that the white stripes stop repeating and you only get black solid color from there on.

Looks like a mobile chromium CSS rendering bug. Desktop browsers render it ok.

Any workaround?

 .repeating-gradient {
    background-image:
      repeating-linear-gradient(
        #000,
        #000 10px,
        rgba(255, 255, 255, 0.8) 10px,
        rgba(255, 255, 255, 0.8) 20px
      );
    background-repeat: repeat-y;
  }

<div class="repeating-gradient" style="height: 39000px;">
</div>