CSS gradient checkerboard pattern
<p>I want to create a checkerboard pattern using gradients. I've found an example and modified it to my needs, however it only works with <code>-moz</code> prefix. When I remove the <code>-moz</code> prefix, the pattern is completely different. <a href="https://i.stack.imgur.com/4fYC2.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4fYC2.png" alt="comparison of patterns : normal vs. -moz"></a></p>

<p>How can I make this <code>-moz</code> checkerboard pattern work with unprefixed <code>linear-gradient</code>?</p>

<pre><code>body {
  background-image:
  linear-gradient(45deg, #808080 25%, transparent 25%), 
  linear-gradient(-45deg, #808080 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #808080 75%),
  linear-gradient(-45deg, transparent 75%, #808080 75%);

  background-size:20px 20px;    
  background-position:0 0, 10px 0, 10px -10px, 0px 10px;
}
</code></pre>