Background-position center e il bug di 1px di scarto su Webkit

Quando si ha un’immagine di sfondo centrata sopra ad un’altro elemento centrato (come un’ombra sopra un contenuto principale) la posizione dell’immagine di sfondo a volte è scostata di 1px su Safari, a seconda dell’ampiezza del viewport.
Background-position center e il bug di 1px di scarto su Webkit

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “Fixing Safari’s 1px background-image centering bug” di Phil Freo.

L’immagine di sfondo non è sempre centrata

Sto lavorando sul CSS per un nuovo progetto di temi per Magento Commerce e sono stato colpito da un errore CSS che riguarda WebKit (Safari e Google Chrome). Dopo alcune ricerche, ho scoperto che anche molte altre persone hanno avuto lo stesso problema, ma non ho trovato un articolo esauriente sulla soluzione. Ecco quello che ho trovato…

Descrizione dell’errore: quando si ha un’immagine di sfondo centrata sopra ad un’altro elemento centrato (come un’ombra sopra un contenuto principale) la posizione dell’immagine di sfondo a volte è scostata di 1px su Safari, a seconda dell’ampiezza del viewport. Così metà delle possibili ampiezze del viewport potebbe mostrare la versione errata. Nonostante 1px non sia la fine del mondo, può davvero danneggiare un design, ed è bene ottenere un allineamento centrale in Safari/Chrome che funzioni bene come in Firefox/IE.

Esempio di codice:

body {
    background: #f8f8f8 url(../images/dh_bg.jpg) 50% 0 repeat-y;
}
div#everything {
    width: 980px;
    margin: 0 auto;
}

Soluzione parziale

Innanzitutto, usate sempre un’immagine di sfondo di pari ampiezza – in questo modo gli altri browser la sistemeranno correttamente in modo automatico.

Per fixare Safari possiamo applicare un hack CSS mirato per WebKit. Se l’ampiezza della vostra immagine di sfondo è leggermente superiore rispetto all’elemento principale, questo la sistemerà:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    body {
        background-position: 49.999% 0;
    }
}

Il problema con questo è che se il viewport viene riadattato per essere leggermente più largo rispetto al vostro div, ma non largo quanto la vostra immagine di sfondo, allora si ripresenterà il problema del 1px.

Soluzione reale

Quindi, la mia soluzione è quella di usare sempre un’immagine di sfondo di pari larghezza che sia più larga dei dispositivi che volete supportare. Ho reso la mia larga 5000px (è ancora < 1kb). Quindi, il seguente CSS funziona benissimo: [css] @media screen and (-webkit-min-device-pixel-ratio:0) { body { background-position: 50.001% 0; } } [/css]

Spero che possa essere di aiuto a qualcuno.

  • Massimo Mastromarino

    MI sono scontrato spesso con questo maledetto bug!! Appena mi ricapita seguirò sicuramente questo consiglio 🙂

    • Stefano Vollono

      Mi fa piacere che di sicuro ti sarà utile!

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github