Join the Mozilla’s Test Days event from Dec 2–8 to test the new Firefox address bar on Firefox Beta 134 and get a chance to win Mozilla swag vouchers! 🎁

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

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

more options

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

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

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:

 #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 . can some one tell me how I can solve this problem with firefox . 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

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

Edeziri site na cor-el

Asịsa ahọpụtara

Hello Johan,

I understand the issue you are facing with the typewriter animation not displaying correctly in Firefox. The problem might be related to how Firefox handles gradients. To solve this, you can try using a different approach like setting a fixed width for the element with the animation or using a different gradient technique that is better supported in Firefox. Additionally, you can experiment with different CSS properties to see if it helps with the rendering in Firefox. If you need further assistance, feel free to ask for help on the Firefox Support Forum, where our community of volunteers and experts can collaborate to find a solution.

Gụọ azịza a na nghọta 👍 0

All Replies (2)

more options

Asịsa Ahọpụtara

Hello Johan,

I understand the issue you are facing with the typewriter animation not displaying correctly in Firefox. The problem might be related to how Firefox handles gradients. To solve this, you can try using a different approach like setting a fixed width for the element with the animation or using a different gradient technique that is better supported in Firefox. Additionally, you can experiment with different CSS properties to see if it helps with the rendering in Firefox. If you need further assistance, feel free to ask for help on the Firefox Support Forum, where our community of volunteers and experts can collaborate to find a solution.

more options

thanks for your advice. johan