-webkit-linear-gradient causa banding in Chrome/Safari

Il titolo prettymuch dice tutto. La prima immagine qui sotto è uno screenshot quando l'intera pagina è alto circa 8000 pixel, preso nella sua ultima versione di Chrome:-webkit-linear-gradient causa banding in Chrome/Safari

enter image description here

mentre questa immagine è per una pagina diversa (utilizzando la stessa CSS), che è circa 800 pixel di altezza:

enter image description here

e qui è il codice:

body{ 
    background-color: #f3ffff; 
    margin:0px; 
    background-image: url('/media/flourish.png'), 
     -webkit-linear-gradient(
      top, 
      rgba(99, 173, 241, 1) 0px, 
      rgba(0, 255, 255, 0) 250px 
     ); 

    background-image: url('/media/flourish.png'), 
     -moz-linear-gradient(
      top, 
      rgba(99, 173, 241, 1) 0px, 
      rgba(0, 255, 255, 0) 250px 
     ); 


    background-image: url('/media/flourish.png'), 
     -o-linear-gradient(
      top, 
      rgba(99, 173, 241, 1) 0px, 
      rgba(0, 255, 255, 0) 250px 
     ); 
    background-position: center top, center top; 
    background-repeat: no-repeat, repeat-x; 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')"; 
    }

Il gradiente è inteso per tagliare a 250 px dalla parte superiore della pagina. Il fatto che il grado di banding sembra dipendere dall'altezza totale della pagina è molto strano: le pagine di altezze tra queste due (800px e 8000px) sembrano avere delle bande che sono più piccole del primo esempio, ma comunque evidenti.

È interessante notare che in precedenza utilizzavo lo -webkit-gradient('linear'...) e che non presentava lo stesso problema; Ho solo invertito lo -webkit-linear-gradient in modo che fosse in linea con i miei gradienti -moz e -o.

Non l'ho provato su Safari, ma il codice sopra lo rende perfettamente funzionante in Firefox e il tipo di lavoro in Opera (i colori sono incasinati, ma la sfumatura è ancora liscia). Nevermind IE, a cui ho rinunciato.

Qualcun altro l'ha visto prima?

Aggiornamento: questo accade anche sul mio Mac Chrome/Safari, ma le bande sono circa 1/3 della dimensione delle bande mostrate nell'immagine in alto, per la stessa identica pagina. Le bande sono identiche sia in OSX Chrome che in OSX Safari.

1/3 la dimensione è ancora evidente, ma non del tutto così stridente. La pagina attuale è http://www.techcreation.sg/page/web/Intro%20to%20XTags/, se vuoi vedere di persona in qualche altro browser. Il CSS è css "in linea" compilato nel browser usando less.js.

fonte

2011-08-29 Li Haoyi

posso osserviamo il problema perché il tuo link non funziona al momento ('KeyError in/page/web/I ntro a XTags/'). Tuttavia, questo sembra essere un bug WebKit. Stack Overflow potrebbe essere in grado di fornire una soluzione alternativa, ma non può correggere il bug. Dovresti presentare una segnalazione di errore, se non l'hai già fatto, qui: https://bugs.webkit.org/ – thirtydot

Ti dispiacerebbe dare un'occhiata alla mia soluzione qui sotto? –

Finito usando quello; grazie =) –

Looks come un bug del webkit. Mi sono inventato il lavoro di seguito, testato sugli ultimi Chrome e FF. In breve, posizionerai un div contenente lo sfondo dietro il tuo contenuto principale. Ho anche aggiunto alcuni stili per rendere IE più felice.

Dato questo HTML:

<html lang="en"> 
<head> 
    <style> 
     ... 
    </style> 
</head> 
<body> 
    <div class="background">bgdiv</div> 
    <div class="content_pane"> 
     <div class="titlebar">Leave a Comment!</div> 
     <div class="comment">Your Comment.</div> 
    </div> 
</body> 
</html>

Combinato con questo foglio di stile:

body{ 
     background-color: #f3ffff; 
     min-height: 100%; 
     margin:0px; 
    } 
    .background { 
     height: 250px; 
     left: 0; 
     position: absolute; /* could use fixed if you like. */ 
     right: 0; 
     top: 0; 
     z-index: -10; 

     background-image: 
      -webkit-linear-gradient(top, 
       rgba(99, 173, 241, 1) 0px, 
       rgba(0, 255, 255, 0) 250px 
      ); 
     background-image: 
      -moz-linear-gradient(top, 
       rgba(99, 173, 241, 1) 0px, 
       rgba(0, 255, 255, 0) 250px 
      ); 
     background-image: 
      -o-linear-gradient(top, 
       rgba(99, 173, 241, 1) 0px, 
       rgba(0, 255, 255, 0) 250px 
      ); 
     background-image: 
      -ms-linear-gradient(top, 
       rgba(99,173,241,1) 0%, 
       rgba(0,255,255,0) 250px 
      ); /* IE10+ */ 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63adf1', endColorstr='#0000ffff',GradientType=0); /* IE6-9 */ 
     background-image: 
      linear-gradient(top, 
       rgba(99,173,241,1) 0%, 
       rgba(0,255,255,0) 250px 
      ); /* W3C */ 
     background-position: center top, center top; 
     background-repeat: no-repeat, repeat-x; 
    } 
    .content_pane { 
     background: white; 
     border: 1px dotted white; 
     border: 1px solid grey; 
     font-family: arial, sans; 
     font-weight: bold; 
     margin: 6em auto 5em; 
     width: 50%; 
    } 
    .titlebar { 
     background: #3f7cdb; 
     color: white; 
     font-family: arial, sans; 
     padding: .25em 2ex .25em; 
    } 
    .comment { 
     padding: 1em; 
    }

dovrebbe venire fuori alla ricerca di questo tipo, indipendentemente dalle dimensioni della finestra:

Chrome image

fonte

2011-09-11 06:52:45

Ho rimosso '-image' e funziona ancora, quindi perché l'hai aggiunto? –

Penso che sia venuto dal generatore di gradiente css che ho usato. Non si è preoccupato di cambiarlo. Sembra che sia un po 'più specifico del semplice "background:". –

Ecco il Fiddle: http://jsfiddle.net/j8y3q5t0/ se qualcuno è interessato a vedere una demo. – SearchForKnowledge

Webkit render -webkit-gradient('linear'...) e webkit-linear-gradient allo stesso modo. Il problema è con i tuoi molteplici background. Ho avuto lo stesso problema e sono stato chiuso con due elementi diversi uno sopra l'altro e quindi dando uno sfondo a ciascuno di essi. Qualcosa di simile:

<body> 
<div class="body-overlay"<div> 
</body>

CSS

body{-webkit-linear-gradient(...)} 
    .body-overlay{background:url('blah.png')}

Penso che questo accade perché l'immagine hanno fissato quantità di pixel

fonte

2011-08-29 18:06:29 Mohsen

che non sembra funzionare; ho tolto il berretto completamente e ho ancora la fascia. Dato che dipende dall'altezza di tutta la pagina, penso che sia qualcosa a che fare con il modo in cui viene calcolato il gradiente. –

Questo era tutto ciò che sapevo. vorrei aver trovato il bug – Mohsen

sembra che Chrome ha alcuni bug quando si utilizza il) valori (RGBA. Ho provato con normali valori esadecimali e sembra che risolva il problema per me.

Look here se lo aggiusta anche per te.

Modifica

Sembra che il problema è nel limite 250px perché appare solo quando questo è impostato.

Non sono riuscito a trovare una soluzione migliore di this one.

Sovrapponendo un div al gradiente che ti piace, 250 px di altezza. Quindi puoi avere la pagina alta quanto vuoi perché il div sarà sempre alto 250px.

fonte

2011-09-06 10:11:25

invece di utilizzare background-image, provare a utilizzare questo (background) -

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#63adf1), color-stop(53%,#ffffff), color-stop(100%,#ffffff)); /* feel free to play with the % values to get what you are looking for */

e anche utilizzare valori esadecimali sempre. Ma da un futuro UX sarebbe meglio usare come nell'immagine (dato che stai caricando comunque un'immagine) e non dovrai preoccuparti della compatibilità del browser.

fonte

2011-09-06 17:05:21 ShalomSam

Il motivo principale per cui volevo usare RBGA era per la trasparenza; Il colore cambia da blu a verde acqua e da opaco a trasparente, su uno sfondo bianco sporco, dando effettivamente un gradiente blu molto piacevole -> verde acqua -> bianco che sarebbe alquanto noioso da generare manualmente. Proverò ad usare le immagini traslucide .png per vedere come andrà a finire. –

sì, suggerirei un png trasparente (tenendo presente che non funzionerà in IE6) coz RGBA non funzionerà in tutte le versioni del browser. Ma prova il codice sopra e vedi se blocca il coz banding se ricordo che avevo lo stesso problema .. quando l'ho usato in immagine di sfondo ... – ShalomSam

Hai provato a impostare background-size: auto, 250px 250px; - auto per la prima immagine e 250 px per la sfumatura.

Quando non hai bisogno di un'immagine gradiente così grande da coprire l'intera pagina, è meglio limitare la sua dimensione. Oltre a rendere i problemi con le immagini grandi, penso che sia meglio per le prestazioni del browser.

Quindi, l'esempio potrebbe apparire come http://jsfiddle.net/kizu/phPSb/ (non protetto, tuttavia, non è possibile riprodurre il problema).

fonte

2011-09-07 14:50:00 kizu

Il link demo non funziona, ma ho fatto alcuni test e ha funzionato bene per me usando Chrome quando si aggiunge larghezza/altezza del 100% per gli elementi del corpo/html, in questo modo:

body, html { 
    width:100%; 
    height:100%; 
}

Demo

si può provare che o si può semplicemente dichiarare un pezzo di intestazione/logo in cui è possibile aggiungere il gradiente di partenza e basta aggiungere il gradiente di porre fine al corpo del tuo css modo che si fonde in modo corretto, in questo modo:

CSS

body, html { 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 

body { 
    background-color: #f3ffff; 
    margin:0px; 
    height:10000px; 
} 

.header { 
    height:300px; 
    width:100%; 
    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'), 
    -webkit-linear-gradient(top, rgba(99, 173, 241, 1), rgba(0, 255, 255, 0)); 

    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'), 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); 

    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'), 
    -moz-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px 
    ); 

    background-image: url('http://cdn1.iconfinder.com/data/icons/stuttgart/32/premium.png'), 
    -o-linear-gradient(top, rgba(99, 173, 241, 1) 0px, rgba(0, 255, 255, 0) 250px); 
    background-position: center top, center top; 
    background-repeat: no-repeat, repeat-x; 
    background-size:auto; 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#63ADF1', endColorstr='#00000000')"; 
}

HTML

<div class="header"> 
    content 
</div>

Demo

Nota amichevole: per chiunque cerchi la questione si può vedere che succede qui in Chrome: http://jsfiddle.net/skJGG/

fonte

2011-09-10 21:48:40

Aggiungere altezza e larghezza al corpo e html funziona davvero. Grazie! –

-webkit-linear-gradient causa banding in Chrome/Safari

risposta

Problemi correlati