• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Problema Incompatibilità css safari su Mac con Safari su Windows

biscquit

Nuovo utente
Autore del topic
18 Dicembre 2015
5
0
Miglior risposta
0
Salve ragazzi,
ho un problema di incompatibilità con Safari su Mac;
Ho queste righe di codice:
@Media screen and (-webkit-min-device-pixel-ratio:0), (max-width:1200px) {
.nome span {line-height :40px;}
::i-block-chrome, .nome span {line-height: 41px;}
}

in questo modo vedo il testo allineato bene con tutti i browser tranne che con safari su Mac...
Se provo a modificare i PX della prima linea, noto le modifiche in safari su Mac ma anche in Chrome e Opera (questo non dovrebbe succede in teoria)

Se modifico la seconda linea invece non applica le modifica su Safari su Mac ma solo su Safari su windows...

qualcuno saprebbe come risolvere questo enigma? grazie.
 
Guarda che sia Chrome che Opera (quest'ultimo da qualche versione) utilizzano Webkit come motore di rendering così come Safari, sia su OSX che su Windows, dunque è ovvio che se utilizzi il prefisso vendor -webkit tu vada ad intaccare tutti e 3 i browser.

Se vuoi "intercettare" solo un particolare browser a prescindere dal motore di rendering, ti conviene utilizzare qualche library JS che ti permetta di identificare gli useragent.

Riguardo al line-height, penso sia un fatto dipeso dal rendering dei font, che ovviamente dipende dal sistema operativo.
 
Ok! Grazie mille per l'aiuto, faccio un po di prove e vedo se riesco a risolvere il mio problema...
Vi farò sapere se riesco a rimediare grazie ancora. Buon proseguimento!