the typewriter animation has deviation only on firefox?the first 3-4 letters is not showing!

[johannes999]

Hello,

this is html code:

<div class="home-page-image-container">
  <img src="https://webdesignleren.com/wp-content/uploads/2023/07/auto-reparatie-in-hoogvliet.webp" alt="auto reparatie" />
  <div id="app"></div>
	  </div>

and this is JS code :

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
<script>

var app = document.getElementById('app');

var typewriter = new Typewriter(app, {
    loop: true
});

typewriter.typeString('Home Developer')
    .pauseFor(2500)
    .deleteAll()
    .typeString('Web Designer')
    .pauseFor(2500)
    .deleteAll()
    .typeString('<strong>FrontEnd Developer</strong>')
    .pauseFor(2500)
    .start();





 
</script>

and this is CSS code:

#app{
  text-align:center;
  font-size:50px;
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-clip:border-box;
   text-fill-color: transparent;
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  animation: textclip 2s linear infinite;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

it is on chrome and edge working very wel but only on firefox  has deviation .  I see firefox has some problems with gradient.the first 3-4 letters are not showing and it has strange behaviour.  I tried in this way to solve the problem:

 #app {
      text-align: center;
      font-size: 50px;
      white-space: nowrap;
      overflow: hidden;
    }

    #app::before {
      content: attr(data-text);
      display: inline-block;
      width: 0;
      color: #231557;
      animation: typewriter 4s steps(40) infinite, colorTransition 4s infinite;
    }

    @keyframes typewriter {
      from {
        width: 0;
      }
    }

    @keyframes colorTransition {
      0% {
        color: #231557;
      }
      50% {
        color: #ff1361;
      }
      100% {
        color: #ff1361;
      }
    }
 <div id="app" data-text="Hello, Gradient!"></div>

but it didn't helpt . I tried many ways but the problem is the same . https://webdesignleren.com/onderhoud/can some one tell me how I can solve this problem with firefox .

thanks 

johannes