チェッカーボードCSSパターンのバグ（対角線悪趣味ライン）

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

結果は、私が欲しかった市松模様ですが、また悪趣味斜めの白を示していますライン！

奇妙なことは、場合によっては問題が消えてしまうことです。

この行を削除する方法はありますか？私は、インターネット上の任意の解決策を見つけることができませんでした

... は、私はそれが唯一のアンチエイリアシングのバグだと思うが、私はコントロール、または削除、アンチエイリアシングする方法を見つけることができませんでした。

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>