モバイル変数SafariでCSS変数が更新されない

Question

私は、デスクトップ変数で正しく動作するthis CodePenに示すように、Javascriptを使用して、半分ごとにCSS変数の値を乱数に設定し、データを円グラフとして表示していますモバイルSafariでは更新されていないようだ。私はSCSSが機能を提供できるかもしれないと読んだが、私はむしろ解決策を可能な限り純粋にcssとjavascriptにしたいと思っている。

のCss：

#CPUPie { 
    position: relative; 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    background: yellowgreen; 
    background-image: 
     linear-gradient(to right, transparent 50%, #655 0); 
    color: transparent; 
    text-align: center; 
} 
#CPUPie::before { 
    content: ''; 
    position: absolute; 
    top: 0; left: 50%; 
    width: 50%; height: 100%; 
    border-radius: 0 100% 100% 0/50%; 
    background-color: inherit; 
    transform-origin: left; 
    transform: rotateZ(var(--CPUPiePercent)); 
    background: var(--CPUPieBackground); 
} 

Javascriptを：CSS変数の

var CPUPie = document.createElement("div"); 
CPUPie.id = "CPUPie"; 
document.body.appendChild(CPUPie); 

setInterval(update, 500); 
update(); 
function update() { 
    var CPUPiePercent = Math.random(); 
    if (CPUPiePercent > .5 && CPUPiePercent != 1) { 
     document.documentElement.style.setProperty("--CPUPiePercent", (CPUPiePercent - .5) + "turn"); 
     document.documentElement.style.setProperty("--CPUPieBackground", "#655"); 
    } 
    else { 
     document.documentElement.style.setProperty("--CPUPiePercent", CPUPiePercent + "turn"); 
     document.documentElement.style.setProperty("--CPUPieBackground", "yellowgreen"); 
    } 
} 

Answer 1

サポートはまだかなり不安定です。私はjavascriptの変数を保存/更新することをお勧めしたいと思います。

if (CPUPiePercent > .5 && CPUPiePercent != 1) { 
    document.querySelector('#CPUPie').style.transform = 'rotate(' + ((CPUPiePercent - .5) * 360) + 'deg'; 
    document.querySelector('#CPUPie').classList.remove('yellowgreen'); 
    document.querySelector('#CPUPie').classList.add('brown'); 
} 
else { 
    document.querySelector('#CPUPie').style.transform = 'rotate(' + (CPUPiePercent * 360) + 'deg'; 
    document.querySelector('#CPUPie').classList.add('yellowgreen'); 
    document.querySelector('#CPUPie').classList.remove('brown'); 
} 

Answer 2

I：あなたの前に擬似要素の背景を切り替えるだけしているので

、私はその後、このようなあなたのJavaScriptを使用する2つの異なるクラス

#CPUPie.brown::before { 
    background-color: #655; 
} 

#CPUPie.green::before { 
    background-color: yellowgreen; 
} 

にそれを変更したいです疑似要素と同様のプロパティを持つ新しいdivを作成し、それをCPUPieの上にレイヤリングするだけで問題が解決しました。更新されたCodePenはhereです。

CSS

#CPUPie { 
position: absolute; 
width: 100px; 
height: 100px; 
border-radius: 50%; 
background: yellowgreen; 
background-image: 
    linear-gradient(to right, transparent 50%, #655 0); 
color: transparent; 
text-align: center; 
} 

#CPUPieSlice { 
position: absolute; 
left: 57.5px; 
width: 50px; height: 100px; 
border-radius: 0 100% 100% 0/50%; 
background-color: transparent; 
transform-origin: left; 
} 

JS

var CPUPie = document.createElement("div"); 
CPUPie.id = "CPUPie"; 
document.body.appendChild(CPUPie); 
var CPUPieSlice = document.createElement("div"); 
CPUPieSlice.id = "CPUPieSlice"; 
document.body.appendChild(CPUPieSlice); 

setInterval(update, 500); 
update(); 
function update() { 
    var CPUPiePercent = Math.random(); 
    if (CPUPiePercent > .5 && CPUPiePercent != 1) { 
    document.getElementById("CPUPieSlice").style.transform = "rotate(" + (CPUPiePercent - .5) + "turn)"; 
    document.getElementById("CPUPieSlice").style.background = "#655"; 
    } 
    else { 
    document.getElementById("CPUPieSlice").style.transform = "rotate(" + CPUPiePercent + "turn)"; 
    document.getElementById("CPUPieSlice").style.background = "yellowgreen"; 
    } 
}