反復線形勾配を使用したクロスハッチ効果が不均一なパターンになる

Question

CSSの背景として斜めのクロスハッチングパターンを作成しようとしています。私はCSS-Tricksのストライプされた背景の例から始めました。

.crosshatch { 
 
\t width: 500px; 
 
\t height: 200px; 
 
    color: white; 
 
    background: repeating-linear-gradient(
 
    45deg, 
 
    rgba(0,0,0,0.5), 
 
    rgba(0,0,0,0.5) 1px, 
 
\t transparent 1px, 
 
\t transparent 5px 
 
); 
 
}

<div class="crosshatch"></div>

しかし、私は正しい1pxのに戻って行く前に、1ピクセルで8回繰り返した後、行は次の6回の反復のために2ピクセル広くなっていること（のみChromeとOperaで）見ています幅。

私はエッジとFirefoxでこの問題を得ることはありません。

ChromeとOperaの回避策はありますか？

Answer 1

私は完全な解決策を見つけることができないようです。このStack Overflow Question - "Diagonal stripes in CSS that are 1px wide"からこのJSFiddleはこのCSS-Tricks tutorial

.crosshatch { 
    width: 500px; 
    height: 200px; 
    color: white; 
    background-image: linear-gradient(
     45deg, 
     rgba(0,0,0,0.5) 25%, 
     transparent 25%, 
     transparent 50%, 
     rgba(0,0,0,0.5) 50%, 
     rgba(0,0,0,0.5) 75%, 
     transparent 75%, 
     transparent 
    ); 
    background-size: 5px 5px; 
}