Html 未定义的黑色显示在react js项目中

我正在使用定制CSS在React JS中创建一个项目，并部署在AmazonS3中。在该项目中，我使用覆盖和边界半径制作了两个圆圈，但在一些手机中，如Redmi 6和Redmi 6A，圆圈以黑色显示。我已经尝试了很多方法，请帮助我，让我知道同样的解决方案

我正在共享代码和图像：

图片：

HTML代码：

<div id="sign1"></div>
<div id="sign2"></div>
<div id="sign3"></div>
<div id="sign4"></div>
<div id="sign5"></div>
<div id="circle"></div>

---

你试过用chrome进行远程调试吗？这可能有助于解决您使用webkit特定属性“webkit打印颜色调整：精确；”时遇到的excat问题和

混合混合模式

，该模式在

边缘

或

IE

中不受支持。因此，考虑到这些手机（和其他手机）可能不使用webkit浏览器，这可能会导致问题。我使用的是chrome浏览器，我使用的是`-webkit打印颜色调整：精确；`。但是我仍然面临同样的问题。没有HTML的CSS是无用的，请将您的HTML添加到问题中。我已经更新了问题，请看一看。

#circle {
    -webkit-print-color-adjust: exact;
    width: 160px;
    background-color: transparent;
    height: 148px;
    border: 17px solid white;
    margin-top: -18.7%;
    border-radius: 50%;
    mix-blend-mode: overlay;
    opacity: 0.4;
  }
  #circleNew {
    width: 103px;
    height: 103px;
    border: 23.8px solid #fff;
    -webkit-print-color-adjust: exact;
    margin-top: -39%;
    border-radius: 50%;
  }
  #circle1 {
    margin-top: -39%;
    -webkit-print-color-adjust: exact;
  }
  #sign1 {
    margin-top: -44.8%;
    margin-left: -36.6%;
  }
  #sign2 {
    margin-top: -12%;
    margin-left: -18.5%;
  }
  #sign3 {
    margin-top: -4.5%;
    margin-left: 77px;
  }
  #sign4 {
    margin-top: 1%;
    margin-left: 32.5%;
  }
  #sign5 {
    margin-top: 3.2%;
    margin-left: 41%;
  }