Warum unterscheiden sich gerenderte Pixel von realen Pixeln?

Question

In meinem HTML habe ich eine <div> (nennen Sie das Panel) mit fester Breite, die etwas Text enthält; Dieser Text wird im begleitenden CSS auf font-size: 25px; line-height: 25px; festgelegt. Zufällig endet der Text als 36 Zeilen.

Da alle Ränder, Polsterungen und Grenzen Null sind, können Sie die Höhe der Platte 36 * 25px = 900px sein erwarten würden, und das ist in der Tat, was ich in Firefox finden, die getBoundingClientRect() Methode des DOM.

Allerdings, in Google Chrome bekomme ich verschiedene Zahlen; es würde scheinen, das Panel ist nur 892.7999877929688px hoch, während Linien 24.799999660915798px hoch sind. Wenn man diese beiden Zahlen teilt, gibt es immer noch 36. Es scheint, dass es ein Skalierungsverhältnis zwischen nominalen Pixeln gibt, wie es in dem CSS festgelegt ist, und echten Pixeln, wie sie von getBoundingClientRect() berichtet werden; in meinem Fall ist dies 1,0080645299120465 nominal pro realen Pixel.

Ein weiteres Beweisstück kommt von Chromium, das in einer nwjs-App läuft, wo ich anfangs die Diskrepanz beobachtete. Während meiner Tests zeigte es durchweg ein unterschiedliches Verhältnis von dem in Chrome. Irgendwann während meiner Tests sind die von Chromium berichteten Pixel plötzlich auf die ganzzahligen Werte gesprungen, wie in Firefox berichtet; Ich bin mir nicht sicher, was ich getan habe, um dies zu erreichen.

Es könnte erwartet werden, dass die Bruchzahlen in irgendeiner Weise mit dem Seitenzoom verknüpft sind; Immerhin, in sehr kleinen Größen, Reflow Chrome und Chromium den Text (und manchmal tun es falsch). In der Tat führt die Vergrösserung des Zooms in Chrome zu unterschiedlichen Verhältnissen, und wenn Chrome auf das Maximum heranzoomt, wird das Verhältnis bei 1 flach. Trotzdem wird meine Chromium-App nicht auf den Maximalwert gezoomt und hat immer noch einen Bruchteil von . ein ganzzahliges Pixelverhältnis im Test, aber ein Bruchwert in der echten App.

Für alle, die ich derzeit weiß, alles, was ich tun kann, um das Verhältnis zu erhalten, damit ich Ton, konsistente Boxgröße mit JavaScript messen kann, ist es, eine Box bekannter Größe einzurichten und zu messen.

Ich frage mich immer noch, was die Quelle des beobachteten Verhaltens ist. Gibt es Berichte darüber? Ist es ein absichtliches oder ein emergentes Verhalten des Renderers? Wurde es jemals von den Entwicklern diskutiert? Gibt es eine API, um das Verhältnis zu erhalten?

Ich habe einen Code auf https://gist.github.com/loveencounterflow/d8c20b9021d2ab3f573a um den Test zu vereinfachen.

Answer 1

Einige Zeichensätze können nicht genau nach der Größe gerendert werden, für die Sie fragen, und Zeichensätze hatten Eigenschaften, die sich indirekt auf die angegebene reale Größe auswirken. Wenn Sie das gleiche Verhalten möchten, müssen Sie vielleicht Ihre eigene Schriftart importieren, um ein ähnliches Cross-Browsing zu erreichen. Ich hatte ein ähnliches Problem während der Arbeit an IE und Chrome.