In che modo i browser gestiscono valori non interi per altezza e larghezza?

Quando ai browser vengono date larghezze e altezze per elementi che non sono valori interi, come si comportano con essi?

In particolare,

  • In quale fase vengono arrotondati i valori non interi? Girano intorno al numero più vicino o li tronono?
  • Quando i bambini di un contenitore hanno dimensioni non interi, ci saranno mai casi in cui la sum delle lunghezze o altezze del bambino non è uguale alla larghezza / altezza interna dell’elemento genitore?
  • Le dimensioni non numerate fornite vengono gestite in modo diverso rispetto ai risultati non interi di dimensioni percentuali?
  • Che dire dei valori non interi per padding e margini?
  • Modifica: sono i browser che eseguono questo arrotondamento o il sistema operativo? Se è il sistema operativo, ciò crea condizioni in cui gli elementi “pensano” del browser sono più grandi della loro area dipinta e ciò crea problemi con il dimensionamento dei contenitori principali?

Asserzione

I browser sono progettati per gestire numeri in virgola mobile e valori inferiori a un pixel.


Per vedere un semplice esempio che mostra che i browser usano numeri in virgola mobile nei loro calcoli, crea un elemento di larghezza del 3% e guarda le sue proprietà calcolate negli strumenti di sviluppo di Chrome mentre viene ridimensionato.

Dovresti vedere qualcosa di simile a questo:

inserisci la descrizione dell'immagine qui

“35.296875” non può essere riprodotto con precisione da un display che esegue il mapping di un pixel a un pixel nel display fisico (CRT, LCD tradizionale). Tuttavia, i nuovi display ad alta densità utilizzano un rapporto diverso da 1-1 e questo valore frazionario potrebbe concettualmente essere utilizzato per fornire un maggiore grado di precisione.

Anche nei display a bassa densità, un valore frazionale potrebbe fornire un suggerimento per il rendering subpixel , che utilizza le componenti rossa, verde e blu del pixel per rendere i bordi di un object più uniformi ansible con i valori di pixel interi.

Ma esattamente quello che il browser farà con questi numeri non è molto prevedibile. Non è ansible (al momento) chiedere a un browser di creare un riquadro di 31,5 px di larghezza e prevedere un risultato coerente o addirittura significativo. Alcuni browser tronceranno i valori frazionari; altri arrotondano su / giù.

Il rendering di subpixel è comunemente usato per il testo e funziona abbastanza bene nella maggior parte / tutti i browser, ma ogni browser implementa questo in modo diverso e c’è ben poco che uno sviluppatore possa fare per influire sul modo in cui funziona.

quando

In quale fase i valori non interi vengono arrotondati nella catena di ereditarietà?

La maggior parte / tutti i calcoli vengono eseguiti come numeri in virgola mobile e qualsiasi arrotondamento può verificarsi in ritardo nel processo o anche al di fuori del controllo del browser. Ad esempio, un browser può debind l’anti-aliasing a un componente del sistema operativo (come ad esempio IE9 a Windows Direct2D e DirectWrite ).

Le transizioni CSS possono essere strettamente integrate con OS e / o accelerazione hardware. Questo è un altro caso in cui penso che sia altamente probabile che i valori in virgola mobile siano preservati dal browser e passati ai livelli sottostanti.

Comportamento / errori di arrotondamento

Quando i bambini di un contenitore hanno dimensioni non interi, ci saranno mai casi in cui la sum delle lunghezze o altezze del bambino non è uguale alla larghezza / altezza interna dell’elemento genitore?

L’ho visto nei browser più vecchi (IE7) come risultato di calcoli percentuali, in cui il 50% + 50% > 100% . Di solito non è un problema finché non provi a fare qualcosa di più complicato. Aneddoticamente, ho visto bug “fuori da un pixel” quando tentavo di allineare con precisione gli elementi HTML come parte di un’animazione.

Percentuali rispetto ad altre unità

Le dimensioni non numerate fornite vengono gestite in modo diverso rispetto ai risultati non interi di dimensioni percentuali?

Girano intorno al numero più vicino o li tronono?

Varia. Questa risposta più vecchia afferma che sono troncati, ma (in Chrome 24) vedo l’arrotondamento (si noti l’esempio del violino). Nota il mio precedente commento sulle differenze tra Chrome e Safari sulla stessa macchina.

Che dire dei valori non interi per padding e margini?

Le stesse regole (o la loro mancanza) sembrano applicarsi.

Standards

Non ho trovato una definizione standard per la gestione dei valori in virgola mobile in tutti i casi. La specifica pertinente più vicina che riesco a trovare parla dei pixel su canvas :

La gestione dell’arrotondamento dei pixel quando le coordinate specificate non si associano esattamente allo spazio delle coordinate del dispositivo non è definita da questa specifica, tranne che il seguente non deve comportare modifiche visibili al rendering: [… elenco delle condizioni …]

Di nuovo, questo è tratto da una sezione che tratta specificamente di canvas , ma insinua:

  • I browser interagiscono assolutamente con i pixel frazionari.
  • Le implementazioni effettive possono variare.
  • Qualche standardizzazione esiste.
  • La mapping al display del dispositivo può influire sul calcolo.