2013-05-22 5 views
6

ho una sfumatura lineare ripetendo in questo modo:Chrome gradiente lineare bug

.placeholder { 
background: repeating-linear-gradient(to top right, #7722AA 0px, #7722AA 6%, #CC44EE 6%, #CC44EE 13%) transparent; 
border: 1px solid #000000; 
float: left; 
height: 110px; 
width: 120px; 
} 

Tuttavia, in Chrome, Firefox su Mac e opera l'aspetto è distorta: enter image description here

Funziona bene quando in una piazza, ma quando diventa un rettangolo diventa frastagliato - lo stesso non si verifica in tutti gli altri browser.

Quali sono le cause?

jsfiddle

+0

Questo è solo il modo in cui viene reso ... – Xarcell

+0

@Xarcell ... così? Non significa che sia reso correttamente ... – rickyduck

+0

quello che voglio dire è, questo è il miglior Chrome può fare a questo punto. Il tuo non otterrà linee non frastagliate a quell'angolo. Regola l'angolo o fai quello che dice Blazemonger, aggiungi un po 'di sfocatura ... – Xarcell

risposta

2

Forse si vuole:

.placeholder { 
background: repeating-linear-gradient(45deg, #7722AA 0px, #7722AA 6%, #CC44EE 6%, #CC44EE 13%) transparent; 
border: 1px solid #000000; 
float: left; 
height: 110px; 
width: 120px; 
} 

?

+0

Soluzione perfetta, grazie! – rickyduck

+0

Poiché la tua casella è rettangolare e non quadrata, l'angolo dal margine superiore destro al bordo inferiore non è 45 gradi. A seconda della libreria di disegni utilizzata dal browser, è probabile che gli angoli che non sono in multipli di 45 gradi siano sfocati. –

1

Un approccio è quello di diffondere la sfumatura un po 'di più. Aggiungendo una transizione gradiente del 2% su entrambi i lati della striscia si ottiene una leggera sfocatura che oscura i bordi senza eliminare il bordo.

repeating-linear-gradient(to top right, #CC44EE 0px, #7722AA 2%, #7722AA 7%, #CC44EE 9%, #CC44EE 14%) transparent 

http://jsfiddle.net/mblase75/FrT6Y/

Per aumentare la sfocatura lungo il bordo della banda, aumentare il 2% al 3% o più e quindi diminuire il 7% al 6% o più per mantenere le strisce della stessa dimensione:

repeating-linear-gradient(to top right, #CC44EE 0px, #7722AA 3%, #7722AA 6%, #CC44EE 9%, #CC44EE 14%) transparent 

http://jsfiddle.net/mblase75/FrT6Y/5/

+0

Sfortunatamente la mia uscita desiderata è come il codice originale è reso in FF, IE e Presto, che è corretto – rickyduck

+1

Potrebbe valere un [bug report] (https: //groups.google.com/a/chromium.org/forum/?fromgroups#!forum/chromium-bugs), quindi. Sebbene Firefox per Mac mi dia gli stessi segni. – Blazemonger

+0

Interessante per lo stesso problema su FF su Mac - grazie. – rickyduck