When rendering a div:

• with a repeating-linear-gradient
• a subpixel (e.g. 100.5px) size
• and a border-radius

Firefox renders a repeat of the gradient inside the border curve on the right side. In the example, you can see the extra black pixels on the right edge.

Rendering the same div without the border-radius does not cause the repeat. Therefore, the extra repeat of the gradient is not expected.

Test case: https://codepen.io/sparkycanva/pen/dyYLrWp

css:

.coloredBox {
  width: 300.5px;
  height: 50px;
  background-image: repeating-linear-gradient(to right, black 0%, red 100%);
}
.rounded {
  border-radius: 4px;
}

html:

<div class="coloredBox"></div>
<br/>
<div class="coloredBox rounded"></div>

I can reproduce this w/ or w/o border-radius.

Xidorn or Sam, can you post your "about:support" information, so that we can get some more information about your graphics configuration?

I was able to reproduce a similar artifact on Linux (so this is apparently platform-independent and not just macOS), both in a non-WR/Skia and WR configuration. As noted by Xidorn, border-radius did not seem to matter. What seems to be key here is that it is a repeating gradient and that the width is a fractional value, not an integer. I would hazard a guess that the background boundaries are getting rounded to whole pixels, while the gradient stops are retaining that sub-pixel precision, and thus when we round up the size (300.5 rounds up, 300.4 rounds down and seem immune), we are forced to sample a little bit of the start of the gradient because of the repeat. Zooming in or out seems to influence the results a bit, but it mostly seems to be about rounding...

Andrew, do you potentially have any insights about what we might want to do here, if anything? You were working on similar-ish things with the WR snapping work, so maybe you came across something not unlike this...