Background Gradient Overlapping Using Infinite Scroll

[michaeljamesdunn]

I'm having an issue that I'm not sure if it's caused by the Jetpack infinite scroll, Independent Publisher theme, or me.

I'm trying to add a subtle background gradient using code similar to below. Each time infinite scroll loads more posts, the gradient seems to get reapplied to the background and, as a result, gets darker and darker with each load. I'm using a child theme and I've tried this code in both the html and body CSS selectors.

Any ideas why?

Thanks, Mike

background: rgba(107,71,0,1);
background: -moz-linear-gradient(left, rgba(107,71,0,1) 0%, rgba(143,2,34,1) 0%, rgba(143,2,34,0) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(107,71,0,1)), color-stop(0%, rgba(143,2,34,1)), color-stop(100%, rgba(143,2,34,0)));
background: -webkit-linear-gradient(left, rgba(107,71,0,1) 0%, rgba(143,2,34,1) 0%, rgba(143,2,34,0) 100%);
background: -o-linear-gradient(left, rgba(107,71,0,1) 0%, rgba(143,2,34,1) 0%, rgba(143,2,34,0) 100%);
background: -ms-linear-gradient(left, rgba(107,71,0,1) 0%, rgba(143,2,34,1) 0%, rgba(143,2,34,0) 100%);
background: linear-gradient(to right, rgba(107,71,0,1) 0%, rgba(143,2,34,1) 0%, rgba(143,2,34,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b4700', endColorstr='#8f0222', GradientType=1 );

[raamdev]

@mikedunn1 Have you tried this with a different theme, e.g., Twenty Fifteen?

[michaeljamesdunn]

Not until just now, but it doesn't seem to be reproducible in Twenty Fifteen or Sixteen.

[michaeljamesdunn]

I also just tried adding the gradient to the parent theme stylesheet, both with and without the child theme activated, and it seems to be doing the same thing both ways.

[raamdev]

@mikedunn1 What browser are you using? Have you reproduced the issue with Firefox and Google Chrome?

[michaeljamesdunn]

Chrome and Safari on OS X and Mobile Safari. I did also try Firefox. I thought I had it fixed by adding background-attachment: fixed, which does seem to work in the desktop browsers, but not in Safari on iOS.