pseuso要素にwindow.getComputedStyleを使用するCSSの計算で

Question

CSSのcalc（）関数で高さを指定したbefore擬似要素を持つ要素がページにあります。このような何か：

.el:before: { 
    content: ""; 
    height: calc(50% + 10px); 
} 

私は:before要素の高さを取得するためにthis methodを使用したい - とのWebkitベースのブラウザでは、それが動作し、ピクセル値を返します。

var height = window.getComputedStyle(
    document.querySelector('.el'), ':before' 
).getPropertyValue('height'); 

は、Firefoxでは、しかし、それはCSSルール（正確に'calc(50% + 10px)'）の実際の文字列を返します。

(function() { 
 
    var height = window.getComputedStyle(
 
    document.querySelector('.myelem'), ':before' 
 
).getPropertyValue('height'); 
 
    
 
\t document.getElementById('result').innerHTML = 'Calculated height is: ' + height; 
 
})();

.myelem { 
 
    position: relative; 
 
    padding-left: 20px; 
 
} 
 
.myelem:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 1px; 
 
    height: calc(50% + 2px); 
 
    background-color: red; 
 
}

<div> 
 
    <div class="myelem"> 
 
    <span>Some stuff here</span> 
 
    </div> 
 
</div> 
 

 
<div id="result"> 
 

 
</div>

このため任意の回避策はありますか？

Answer 1

確かにバグです、修正のために

、あなたは2013年からこのbug-reportに投票し、それが最終的に固定されますことを願って、あるいはあなたには、いくつかの時間とC++の知識を持っている場合は、パッチを提案することができます。 - ）

回避策について、あなたはそれを自分で計算する必要があります...