How to keep line width the same in a diagonal border using repeating-linear-gradient?

Question

I'm trying to use repeating-linear-gradient on a border that has a 1px wide line with 6px of spacing between each line.

Can someone tell me what I'm doing wrong so the lines are not the same width when they repeat? I've tried tweaking the pixel values but they never match up.

JSFiddle

background: gray repeating-linear-gradient(-45deg, transparent, transparent 1px, #fff 1px, #fff 6px);

Answer 1

Based on this CSS Tricks article by Ana it seems like the browsers have rendering differences when it comes to repeating-linear-gradient. There are comparison screenshots at the end of the article which highlights how the rendering is correct in Firefox on Windows but not so in Chrome on Windows and Firefox on OS X.

Solution:

One solution seems to be set background-size and make two strokes part of the gradient (unlike the code in question where there is only one stroke). The background size is calculated as the last color stop point (14px) divided by square root of 2 (which approximately becomes 10px).

The background-size setting is mandatory because without that it doesn't work in Opera, Chrome. It does seem to make the line a bit thicker but it atleast seems to work better than before.

This works in Chrome, Opera, Edge, IE11, Firefox on Windows and Firefox on OS X.

.border {
  background: gray repeating-linear-gradient(-45deg, transparent, transparent 1px, #fff 1px, #fff 7px, transparent 7px, transparent 8px, #fff 8px, #fff 14px);
  background-size: 10px 10px; /* equal to last color stop point / sqrt(2) - 14 / 1.414 */
  height: 50px;
}

<div class="border"></div>

Below is the screenshot from Firefox on OS X (thanks to web-tiki for the screenshot).