模糊滤镜无法正常工作（模糊滤镜未更新以匹配渐变动画）

Question

我正在尝试创建背景模糊的文本，因此该文本看起来像先兆。到目前为止，我的代码是

.testRainbow {
  position:fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  z-index: 9999;
}

.testRainbow::before {
  content:'';
  position:fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height:100%;
  background: linear-gradient(90deg, #03a9f4, #f441a4, #ffeb3b, #03a9f4);
  background-size: 400%;
  -moz-animation: slideRainbow 8s linear infinite;
  -webkit-animation: slideRainbow 8s linear infinite;
  animation: slideRainbow 8s linear infinite;
  -moz-filter: blur(1em);
  -webkit-filter: blur(1em);
  filter: blur(1em);
  z-index: -1;
}
@keyframes slideRainbow {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 400%;
  }
}
@-webkit-keyframes slideRainbow {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 400%;
  }
}
@-moz-keyframes slideRainbow {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 400%;
  }
}

<h1 class='testRainbow'>test</h1>

我测试了它，它可以在Chrome上运行，但不能在Safari上运行。此外，我检查了它是否不能在移动Chrome上运行，这很有趣，因为当我从台式机上打开Chrome时，它可以正常工作。

所有浏览器的线性梯度都在变化，但是对于那些不起作用的浏览器，似乎模糊度没有得到更新。我检查了在调整大小或放大时，模糊会更新为当前渐变。需要更改什么？预先感谢。

---

编辑 我解决了问题，然后遇到了另一个问题。我在关键帧中添加了filter: blur，如下所示：

@keyframes slideRainbow (
    0% {
      background-position: 0%;
      filter: blur(1em);
    }
    100% {
      background-position: 0%;
      filter: blur(1em);
    }
}

这里我只有彩虹渐变，但是CSS中还有3种颜色，并且显示的颜色是随机的。当连续两次或更多次选择相同的颜色时，动画将停止，并且文本后面会出现一个渐变色。选择其他颜色后，动画将重新播放。
应该看起来像这样：

但是连续两次被选中，结果如下：