"vw" jednostki CSS w Calc w Chrome nie działa

Question

nowego vw (i vh, vmin i vmax) jednostki CSS są bardzo użyteczne, ponieważ jest calc. Oba działają poprawnie w Chrome (ten ostatni jest poprzedzony prefiksem -webkit-calc), ale z jakiegoś powodu odkryłem, że wartości właściwości, w tym jednostki , takie jak width: -webkit-calc(95vw - 25em), powodują niepoprawną wartość właściwości. Czy to nie jest jeszcze zaimplementowane, czy spec, czy błąd?

Answer 1

To błąd, zarejestrowany jako Bug 94158 - Calc nie działa z jednostkami rzutni.

Answer 2

To stary błąd i od dawna został naprawiony, ale jeśli nadal obsługujesz starsze wersje chrome, a konkretnie napotykasz ten błąd w starszej wersji chromu w obsługiwanym przez Ciebie tablecie z Androidem (tak jak to było w moim przypadku)), oto prosty sposób obejścia tego błędu:

Użyj opakowania, które obejmuje VW, na który kierujesz, a następnie zamiast używać jednostek widoku w calc (...), użyj 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); 
}