Modello di scacchiera a gradiente CSS

Question

Voglio creare un motivo a scacchiera usando i gradienti. Ho trovato un esempio e l'ho modificato per le mie esigenze, tuttavia funziona solo con il prefisso -moz. Quando rimuovo il prefisso -moz, il modello è completamente diverso.

Come posso fare in modo che lo schema di scacchiera -moz funzioni con linear-gradient prefisso?

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

Answer 1

Basta modificare il background-position come nel frammento qui sotto per ottenere il risultato desiderato. Funziona perfettamente con Firefox, Chrome, Opera, IE11 e Edge.

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, 0 10px, 10px -10px, -10px 0px; 
 
}

Il problema sembra accadere a causa di una differenza nel modo in cui gli angoli sono gestite dal gradiente lineare -moz e quella standard. -45deg nel gradiente lineare -moz sembra essere uguale a 135deg nel gradiente standard (ma cambiando l'angolo si ottiene uno strano punto nel mezzo).

Le schermate seguenti mostrano la differenza (entrambe scattate nell'ultima versione di Firefox v44.0).

uscita con -moz-lineare gradiente:

uscita con gradiente lineare: