Background traslato dal margine inferiore: comportamento opposto tra Firefox e Chrome

[ldetomi]

Ho scoperto che Firefox e Chrome si comportano in maniera opposta nel rendere uno sfondo a gradiente, traslato dal margine inferiore della pagina.

Ecco il mio codice CSS:

html
{
   background:linear-gradient(to bottom, rgba(245,245,245,1) 0%,rgba(255,255,255,0) 8%);
   background-position: center top 30px;
}

body
{
   background:linear-gradient(to bottom, rgba(255,255,255,0) 92%,rgba(245,245,245,1) 100%);
   background-position: center bottom 100px;
}

Ho creato anche un JSFiddle (Sfondo traslato )

L'idea è quella di applicare una sorta di effetto "Sliding doors" dello sfondo applicando 2 gradienti opposti sugli elementi BODY e HTML.

Il problema emerge quando imposto l'offset dal margine inferiore nel tag BODY. Firefox lo trasla verso l'alto quando imposto valori positivi per l'offset, mentre Chrome lo fa con valori negativi (o trasla verso il basso con valori positivi).

Quindi i 2 browsers hanno comportamento opposto.....

Potete aiutarmi?

[webbeloz]

non capisco cosa dovrebbe fare il tuo fiddle...
con FF aggiornato, è tutto posizionato in modo strano.

[ldetomi]

Non è posizionato in modo strano: ho semplicemente applicato 2 sfondi a BODY e HTML come descritto nel thread, e per inserire un qualsiasi oggetto in pagina che desse l'altezza ai 2 tags padri, ho messo un div con bordi rossi, tutto qui!

Non è il DIV il problema, il problema è la diversa resa degli sfondi su Firefox e Chrome. Chrome ottiene lo stesso effetto di Firefox, a condizione di cambiare segno al valore in px dell'offset.

[Nobody33]

Non si capisce l'effetto "sliding doors", di cui non c'è nemmeno l'ombra.

Se magari spieghi meglio cosa vuoi ottenere....

[webbeloz]

aggiorna il fiddle...
con così poco codice, dubito che tu possa ottenere altro.

La diversità tra Chrome e Firefox c'è, ma è anche logico che ci sia, devi aggiungere altro per capire meglio, e sopratutto ricorda che Chrome vuole avere i sui comandi che sono leggermente diversi da FireFox.
Sistema il linear-gradient ( -webkit- / -moz- e senza...)
Fai/cci capire meglio cosa devi ottenere.

[ldetomi]

Ma scusa.... non c'è molto da aggiungere, anzi.... ho postato proprio il minimo codice necessario a mostrare il problema.

Il comportamento desiderato è quello di Firefox, con una sfumatura da rosso a trasparente dall'alto verso il basso, e una contrapposta, dal basso verso l'alto.

Chrome fa la stessa cosa solo a condizione di mettere il "-" davanti all'offset dello sfondo.

In questo caso non c'è problema del fallback del gradiente con i tags proprietari. Come vedi entrambi renderizzano il gradiente, non è che uno dei 2 lo ignora, è un problema legato all'ffset, non al gradiente.....

[webbeloz]

per fare ciò che vuoi, devi aggiungere html, altrimenti ti troverai sempre in difficoltà...
per es. se nel fiddle togli l'altezza del div l'esempio scompare/ nn funziona.
Poi una volta aperto un div, deve essere anche chiuso:

/* apro */

<div>

/* chiudo */

</div>

ho creato un Playground, puoi fare modifiche dirette come fosse un fiddle...

Playground

[ldetomi]

(a parte il div di chiusura che mancava nel JsFiddle, il resto comunque è giusto)

Mi spiace ma la soluzione da te proposta si discosta molto dalla struttura html che ho. Come detto, non ho blocchi posizionati assolutamente come hai fatto tu nel PlayGround, e inoltre il problema si verifica in presenza di un offset dello sfondo, che tu non hai considerato..... insomma, mi spiace ma il principio applicato non è quello che porta al risultato illustrato nel mio JsFiddle.

A me sembra proprio un bug di Chrome, chiedo se anche voi siete in grado di vederlo. Pensavo onestamente di trovare centinaia di riferimenti su google in merito ma.... incredibilmente, sembro il primo ad averlo notato.....

[webbeloz]

prima di considerare un BUG di Chrome, aggiusterei il fiddle come suggerito.
Quando il fifddle sarà ben definito e chiaro, con l' HTML e i CSS apposto, allora
non solo sarò in grado di capire ( io/altri ) xchè procedere in quel modo, ma
considerarlo anche xchè no, Un BUG di Chrome.

Se così fosse si potrebbe aggiungere alla lista ( breve di Bug che Chrome
vanta nei confronti dei CSS. ( -webkit- ).

Quando hai un fiddle aggiornato, pubblica.

[ldetomi]

Ho trovato il problema, o meglio... il workaround: JsFiddle (risolto)

Basta aggiungere alla dichiarazione del BODY un

background-repeat:no-repeat;

Così facendo, anche Chrome visualizza il mio JsFiddle, esattamente come Firefox.