Checkerboard CSS pattern bug (diagonal unaesthetic line)

Question

I've created a checkerboard pattern with the following css code:

.testcheckerboard{
  width: 200px;
  height: 100px;

  background-color: white;
  background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%);
  background-position: 0 0, 20px 20px;
  background-size: 40px 40px;
}

The result is the checkerboard pattern that I wanted, but is also shown an unaesthetic diagonal white line!

The strangeness is that, in some cases, the problem disappears.

There is a way to remove this line? I think that is only an antialiasing bug, but i couldn't find a method to control, or remove, antialiasing...

I couldn't find any solutions on the Internet.

Answer 1

I've found a workaround by using inline-svg into css.

Works with all Windows browsers, and Android browsers, but i'm not secure that this works with OSX (MAC).

.testcheckerboard{
  width: 200px;
  height: 100px;
  background-size: 40px 40px;

  background-color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Cpath fill='rgb(0,0,0)' fill-rule='evenodd' d='M0 0h1v1H0V0zm1 1h1v1H1V1z'/%3E%3C/svg%3E");
}

<div class="testcheckerboard"></div>