html - react js项目中显示未定义的黑色

Question

我正在使用自定义 CSS 在 React JS 中制作一个项目，并且还部署在 Amazon S3 中。在项目中，我使用覆盖和边框半径制作了两个圆圈，但在某些手机（如 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>

CSS代码：

#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%;
  }

标签： htmlcssmedia-queries