바둑판 CSS 패턴 버그 (대각선 unaesthetic 라인)

Question

나는 다음과 같은 CSS 코드를 바둑판 모양으로 만든 :

.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; 
} 

결과는 내가 원하는 바둑판 패턴입니다뿐만 아니라 흰색 unaesthetic 대각선을 표시됩니다 선!

이상한 점은 문제가 사라지는 경우가 있다는 것입니다.

이 줄을 제거하는 방법은 무엇입니까? 안티 앨리어싱 버그라고 생각하지만 안티 앨리어싱을 제어하거나 제거하는 방법을 찾지 못했습니다 ...

인터넷에서 해결책을 찾지 못했습니다.

Answer 1

나는 CSS로 인라인 SVG를 사용하여 해결 방법을 찾았습니다.

모든 Windows 브라우저 및 Android 브라우저에서 작동하지만 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>

Answer 2

문제는 그라디언트의 회전 (Google 콘솔에서 45deg로 바뀌고 어떤 일이 발생하는지 이해하면 이해할 수 있음)에서 발생합니다. 25 %에서 26 %로 변경하면 문제가 사라집니다.

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

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

<div class="testcheckerboard" > 
 

 
</div>