"VW" सीएसएस calc में क्रोम में इकाइयों

Question

काम नहीं कर नया vw (और vh, vmin और vmax) सीएसएस इकाइयों, काफी उपयोगी होते हैं के रूप में calc है। क्रोम में दोनों काम ठीक (उत्तरार्द्ध -webkit-calc के रूप में पहले से जुड़ा हुआ है), लेकिन किसी कारण से मैंने पाया कि calc संपत्ति ऐसे width: -webkit-calc(95vw - 25em) रूप v* इकाइयों सहित मूल्यों, गलत संपत्ति के मूल्य उपज। क्या यह अभी तक लागू नहीं हुआ है, या कल्पना, या एक बग?

Answer 1

यह एक बग है, Bug 94158 के रूप में पंजीकृत - कैल्क व्यूपोर्ट इकाइयों के साथ काम नहीं कर रहा है।

Answer 2

यह पुरानी बग है और इसे लंबे समय से तय किया गया है, लेकिन यदि आप अभी भी क्रोम के पुराने संस्करणों का समर्थन कर रहे हैं, और विशेष रूप से एंड्रॉइड टैबलेट में क्रोमियम के पुराने संस्करण में इस बग का सामना कर रहे हैं तो आप समर्थन कर रहे हैं (जैसा कि मेरा मामला था), यहां आप इस बग के चारों ओर प्राप्त कर सकते हैं:

एक रैपर का उपयोग करें जो आपके द्वारा लक्षित वीडब्ल्यू को फैलाता है, और फिर कैल्क (...) में व्यूपोर्ट इकाइयों का उपयोग करने के बजाय, 100% का उपयोग करें।

एचटीएमएल:

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

सीएसएस:

.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); 
}