"VW" unità CSS in Calc in Chrome non funzionano

Question

Le unità CSS nuovo vw (e vh, vmin e vmax) sono molto utili, come è calc. Entrambi funzionano bene in Chrome (quest'ultimo ha il prefisso -webkit-calc), ma per qualche motivo ho riscontrato che i valori delle proprietà calc, incluse le unità v*, come width: -webkit-calc(95vw - 25em), restituiscono un valore di proprietà non valido. Questo non è ancora stato implementato, o la specifica, o un bug?

Answer 1

È un bug, registrato come Bug 94158 - calc non funziona con unità viewport.

Answer 2

È un vecchio bug ed è stato risolto da molto tempo, ma se continui a supportare versioni precedenti di Chrome, e in particolare si incontra questo bug in una versione precedente di cromo in un tablet Android che stai supportando (come era il mio caso), ecco il modo più semplice per aggirare questo bug:

Utilizzare un wrapper che copre la VW che si sta scegliendo, e invece di utilizzare le unità viewport nel calc (...), utilizzare 100%.

html:

<div class="container"> 
    <div class="inner-calc-with-viewport-units-bugged" /> 
</div> 

css:

.container { 
    width: 100vw; //or height: 100vh, depending on your usecase 
} 
.inner-calc-with-viewport-units-bugged { 
    width: calc(100% - XXXXX px); //or height: calc(100% - XXpx); 
}