Perché i pixel renderizzati differiscono dai pixel reali?

Question

Nel mio HTML ho un <div> (chiamalo pannello) con una larghezza fissa che contiene del testo; quel testo è impostato su font-size: 25px; line-height: 25px; nel CSS allegato. Accade così che il testo finisca con 36 righe.

Dato che tutti i margini, i riquadri e i bordi sono pari a zero, ci si aspetta che l'altezza del pannello sia 36 * 25px = 900px, e questo è in effetti ciò che trovo in Firefox, utilizzando il metodo getBoundingClientRect() del DOM.

Tuttavia, in Google Chrome ottengo cifre diverse; sembrerebbe che il pannello sia alto solo 892.7999877929688px mentre le linee sono alte 24.799999660915798px. Dividere quei due numeri dà comunque 36. Sembra che esista un rapporto di ridimensionamento tra pixel nominali impostato nel CSS e pixel reali come riportato da getBoundingClientRect(); nel mio caso, questo è 1.0080645299120465 nominale per pixel reali.

Un'altra prova proviene da Chromium in esecuzione in un'app nwjs in cui inizialmente osservavo la discrepanza. Durante i miei test, ha mostrato costantemente un diverso rapporto da quello in Chrome. Ora, ad un certo punto durante i miei test, i pixel segnalati da Chromium sono balzati improvvisamente ai valori interi come riportato in Firefox; non sono sicuro di quello che ho fatto per farlo accadere.

Ci si può aspettare che i rapporti frazionari siano in qualche modo collegati allo zoom della pagina; dopotutto, in dimensioni molto piccole, Chrome e Chromium riflettono il testo (e talvolta lo fanno male). In effetti, variando lo zoom in Chrome si ottengono rapporti diversi, e facendo in modo che lo zoom di Zoom massimo raggiunga il massimo, il rapporto si riduce a 1. Tuttavia, la mia app Chromium non è ingrandita al massimo e ha ancora il rapporto . un rapporto di pixel intero nel test ma un valore frazionale nell'app reale.

Per quanto ne so, tutto quello che posso fare per ottenere il rapporto così posso fare un suono, la misura della scatola coerente con JavaScript è di creare una scatola di dimensioni conosciute e misurarla.

Mi chiedo ancora quale sia la fonte del comportamento osservato. Ci sono dei resoconti? È un comportamento intenzionale o emergente del renderer? È mai stato discusso dagli sviluppatori? C'è una API per ottenere il rapporto?

Ho messo un po 'di codice in un elenco a https://gist.github.com/loveencounterflow/d8c20b9021d2ab3f573a per semplificare i test.

Answer 1

Alcuni font non possono essere visualizzati con le dimensioni esatte che si richiedono e i caratteri hanno proprietà che influiscono indirettamente sulle dimensioni reali segnalate. Se vuoi sempre lo stesso comportamento, forse devi importare il tuo font per ottenere un crossover di rendering simile. Ho avuto un problema simile mentre lavoravo su IE e Chrome.