Фильтр размытия не работает должным образом (фильтр размытия не обновляется в соответствии с анимацией градиента)

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 цвета, и какой цвет показан случайным образом. Когда один и тот же цвет выбирается дважды или более подряд, анимация останавливается, и за текстом появляется градиент solid. Когда выбран другой цвет, анимация возобновляется.
Предполагается, что это будет выглядеть так:

But being selected twice in a row, it becomes like this:
эта проблема