0

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>
easwee
  • 15,757
  • 24
  • 60
  • 83
  • and why you need a div with such a huge height? – Temani Afif Jan 23 '22 at 19:17
  • Seems OK on IOS 15 Chrome and Safari.l – A Haworth Jan 23 '22 at 20:25
  • @AHaworth did you try scrolling to the bottom of page? – easwee Jan 24 '22 at 10:26
  • Yes I scrolled down as far as it would go. I do wonder if you have some sort of problem because the number is over 32K. – A Haworth Jan 24 '22 at 10:55
  • @AHaworth I did some testing and the problem is first visible at 20500px div height with the above sample code. 20490px is the last height that still renders the striped pattern across the entire div, after that the remaining space is just black color. – easwee Jan 24 '22 at 12:02
  • I made another test making the same striped pattern using multiple linear-gradients and that one works fine - so this seems to be a repeating-linear-gradient rendering issue. – easwee Jan 24 '22 at 12:03

0 Answers0