This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

Modified by cor-el

Chosen solution

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.

Read this answer in context 👍 0

All Replies (2)

more options

Seçilmiş Həll

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