<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 Javascript 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>

#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;
  }
}

 #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>

Hello, this is html code: <pre><nowiki><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 Javascript 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> </nowiki></pre><br> and this is CSS code: <pre><nowiki>#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; } } </nowiki></pre><br> the typewriter animation with text on chrome,edge,opera is working very wel . only on firefox is not working correctly. I see firefox has some problems with gradient.in this textwriter animation on firefox the first 3-4 letters are not showing and it has strange behaviour. I tried in this way to solve the problem: <pre><nowiki> #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> </nowiki></pre><br> but it didn't helpt . I tried many ways but the problem is the same . can some one tell me how I can solve this problem with firefox . [https://webdesignleren.com/onderhoud/ link text] any idea is welkome it has to be some way to solve this problem . I used chatgpt but it didn't help. thanks johan