Переменные CSS не обновляются на Mobile Safari

Question

Я использую Javascript для установки значения переменных CSS на случайное число каждые полсекунды и отображения данных в виде круговой диаграммы, как показано в this CodePen, что отлично работает в моем браузере рабочего стола , но, похоже, не обновляется на Mobile 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:

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

Поддержка CSS переменных все еще довольно шатким. Я бы рекомендовал хранить/обновлять переменные в javascript и просто устанавливать их как таковые.

Поскольку вы просто переключать фон на перед псевдо элемент, я бы просто изменить, что к двум различным классам

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

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

Затем с помощью 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 решил проблему в моем случае, просто создав новый 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"; 
    } 
}