Elementi di rendering inconsistenti di Chrome con offset

Question

Ho lavorato su un sito Web e utilizzato le query multimediali in modo celeste per rendere il sito reattivo.

Ma verificarsi errori molto strano in Chrome in cui si sta rendendo gli elementi nelle posizioni sbagliate (sembra che stia facendo allineare più elementi sulla pagina a destra.

Vorrei allegare uno screenshot di allineamento sbagliato. Come puoi vedere il testo nella barra in alto va oltre le linee, nel mezzo ogni elemento che è normalmente centrato è spostato a destra, inoltre nella barra in basso lancia elementi di testo normalmente distanziati l'uno accanto all'altro di ogni altro

Per vedere il sito Web online https://tunepitch.com/. La cosa strana è che il chrome a volte lo rende sbagliato ma molto tempo mostra corretto . Può andare via trascinando la finestra, ma un approccio più efficace è quello di uccidere il browser e riavviarlo.

Qualcuno sa perché Chrome ha questo problema e che cosa sta causando nel mio css?

Quello che ho cercato:

• check Audit in strumenti di Chrome per sviluppatori
• variabili stile Modifica nella finestra di ispezione
• disabilitare la cache di
• disattivare JavaScript

UPDATE

Passo un po 'di tempo a fare il debug del css. Aggiunto css riga per riga e ancora non riesco a trovare il problema di root. Quello che ho notato con tutti gli elementi che sono disallineati è che la larghezza non è calcolata correttamente dai browser webkit. Spero che l'immagine in più possa indicarlo. (Esp quando si passa il testo dovrebbe diventare viola al passaggio del mouse. Come si può vedere, è viola solo per una certa quantità di larghezza.

UPDATE 2 Per essere chiari con javascript disattivato il problema persiste. I Ho provato a fare un semplice testcase per questo problema ma poiché il problema è così inconsistente non riesco a indicarlo in un semplice blocco CSS

Sto usando chrome 31.0.1650.57 su Windows 8.1 Uno dei miei client usa Windows 7 in combinazione con 31.0.1650.57 pure.

UPDATE 3 Ho un video dal vivo che può mostrare la stranezza del problema. Puoi vedere la prima volta che apro il cromo che è corretto, poi chiudo e lo apro di nuovo e tutto è disallineato. Quando ho quindi ispezionare l'elemento tutto salta alla posizione di destra (che non fa questo sempre youtube link

AGGIORNAMENTO 4 @SetSailMedia è giusto è stato l'utilizzo di un font SVG in Chrome. Ciò che è strano è che Ho usato questo tipo di carattere in altri siti Web e non ho mai visto questo problema.Tornato per caricare il font dai webfonts di Google invece del mio carattere hosted, il che rende il font ancora più brutto ma è una soluzione migliore del disallineamento degli elementi.

Answer 1

Sembra che i caratteri svg abbiano un problema in chrome. Come sottolineato dal commentatore @Wesabi in this google group. Ho testato il tuo link e cambiato font in un font non-svg e sembra funzionare.

Ciò che ha causato l'incoerenza all'interno delle sessioni è che a volte il carattere viene caricato prima del calcolo degli elementi e talvolta dopo la seconda in quale ordine le richieste vengono compilate.

La soluzione migliore sarebbe utilizzare Google Webfonts anche se il carattere sembra anti-alias in chrome, verrà impostato su un altro tipo di carattere.

Chrome ha anche problemi di rendering di caratteri SVG in caselle di selezione, ad esempio. Per vedere la domanda originale e la segnalazione di bug.

Original svg problem with select boxes

Google bug report

Answer 2

Puoi provare a utilizzare reset CSS di Eric Meyer che rimuoverà tutta l'inconsistenza tra i diversi rendering del browser. Ecco il codice qui sotto:

/* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126 
    License: none (public domain) 
*/ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}