未在移動Safari上更新的CSS變量

我正在使用Javascript將CSS變量的值設置爲每半秒一個隨機數，並將數據顯示爲餅圖，如this CodePen中所示，在我的桌面瀏覽器上正常工作，但在Mobile Safari上似乎沒有更新。我讀過SCSS可能會提供功能，但我寧願保持解決方案純CSS和JavaScript如果可能的話。未在移動Safari上更新的CSS變量

的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"); 
    } 
}

來源

2016-09-20 Lebirava

哪個版本的iOS？我很確定只有最近（9.3+）他們是否添加了對CSS變量的支持。 – Quantastical

我正在運行9.3.3，並且CodePen無法在我的手機上工作。而變量的作品，但它不會更新，所以它只顯示初始值。 – Lebirava

支持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'); 
}

來源

2016-09-20 20:40:01 heron

旋轉元素，我試着旋轉psuedo元素。 – Lebirava

我通過簡單地創建一個與僞元素具有相似屬性的新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; 
}

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"; 
    } 
}

來源

2016-09-20 22:38:23 Lebirava

未在移動Safari上更新的CSS變量

回答

相關問題