計算の「vw」CSS単位Chrome機能していません
新しいvw
(およびvh
、vmin
、およびvmax
)CSSユニットは、calc
と同様に非常に便利です。どちらもChrome(後者の接頭辞は_-webkit-calc
_)で正常に機能しますが、何らかの理由で、_v*
_を含むcalc
プロパティ値が見つかりました。 width: -webkit-calc(95vw - 25em)
などの単位は、無効なプロパティ値を生成します。これはまだ実装されていないだけですか、仕様ですか、それともバグですか。
これはバグであり、Bug 94158 --calcがビューポートユニットで機能していません。
これは古いバグであり、長い間修正されていますが、古いバージョンのChromeを引き続きサポートしている場合、特にサポートしているAndroidタブレットの古いバージョンのChromeでこのバグが発生した場合は、 (私の場合のように)、このバグを回避する簡単な方法は次のとおりです。
ターゲットとするVWにまたがるラッパーを使用し、calc(...)でビューポートユニットを使用する代わりに、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);
}