CSS变量在移动Safari上不更新

CSS Variables Not Updating on Mobile Safari

本文关键字：更新 Safari 移动 变量 CSS      更新时间：2023-09-26

我使用Javascript将CSS变量的值设置为每半秒一个随机数，并将数据显示为饼状图，如这个CodePen所示，它在我的桌面浏览器上运行良好，但在移动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");
    }
}

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

在我的例子中，我通过简单地创建一个具有与pseudo元素相似属性的新div并将其分层在CPUPie之上来解决这个问题。更新的CodePen可以在这里找到。

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";
  }
}
相关文章：