仅在 Safari 中存在 ::before 元素和不透明度问题

Question

我目前正在尝试为我的 React 应用程序制作一个加载器，该加载器具有由伪元素

::before

制成的颗粒状背景，该元素具有不透明度的背景噪声图像以产生噪声效果。在这个容器内，我有 2 个徽标和一个大圆圈，这是一个简单的 svg。在加载结束时，我只需放大圆圈以填充整个窗口，然后渲染我的页面组件。

事情是这样的：在 Safari 中，我的大圆圈看起来是一个正方形！并且要稍微透明！

这是我的加载器的 JSX/CSS：

<div className="z-40 flex items-center justify-center bg-darker-gray grain">
    <img ref={logoRef} src={Logo} className="z-50 w-28 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0"/>
    <img ref={letterLogoRef} src={LetterLogo} className="z-50 h-28 opacity-0 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"/>
    <img className="h-px w-px z-[1000] absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" ref={bigRoundRef} src={CircleLoader}/>
</div>

CSS（谷物是我的容器，背景嘈杂：

.grain {
  position: relative;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  transform: translateZ(0);
  pointer-events: none;
}

.grain:before {
  content: "";
  top: -10rem;
  left: -10rem;
  width: calc(100% + 20rem);
  height: calc(100% + 20rem);
  z-index: 45;
  position: absolute;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/30/256x256_Dissolve_Noise_Texture.png);
  opacity: 0.1;
  pointer-events: none;
  -webkit-animation: noise 1s steps(2) infinite;
  animation: noise 1s steps(2) infinite;
}

我尝试了多种方法，例如对我的圆圈进行 3D 变换以使其位于前面，或者在其上添加额外的

opacity:1;

，但似乎没有任何改变......

Answer 1

更新：我设法通过用简单的圆形完整 div 替换圆形图像来修复它，并通过使用 GSAP 更改宽度和高度而不是使用缩放动画来使其增长，现在它在每个浏览器上都能正常工作