CSS градиентная анимация не работает в ребре

Question

Я использую следующее для создания анимации градиента на моей странице, но ребру это не нравится.

Когда анимация завершается в Edge, градиент нарушается. Он отображает темно-синий. Я использую linear-gradient и keyframes для воспроизведения анимации.

Есть идеи? Кто-нибудь испытывал это раньше?

    .wrapper {
      align-items: center;
      background-image: linear-gradient(to right, #054f7d, #00a7cf, #efe348, #861a54, #054f7d);
      background-size: 600%;
      background-position: 0 0;
      box-shadow: inset 0 0 5em rgba(0, 0, 0, 0.5);
      height: 100%;
      justify-content: center;
      /* Animation */
      animation-duration: 20s;
      animation-iteration-count: infinite;
      animation-name: gradients;
    }

    h1 {
      color: white;
      font-size: 2.4em;
      text-align: center;
      text-transform: uppercase;
    }

    @media (max-width: 830px) {
      h1 {
        font-size: 2em;
      }
    }
    @keyframes gradients {
      0% {
        background-position: 0 0;
      }
      25% {
        background-position: 50% 0;
      }
      50% {
        background-position: 90% 0;
      }
      60% {
        background-position: 60%;
      }
      75% {
        background-position: 40%;
      }
      100% {
        background-position: 0 0;
      }
    }

Снимок экрана

Answer 1

Я нашел решение для вас, используя чистые CSS и HTML, оно использует свойство маски изображения в CSS

Решение

надеюсь, что это Решение поможет вам в ваших усилиях по кодированию:)