the typewriter animation has deviation only on firefox?t

  • Resolved johannes999

    (@johannes999)


    1 year, 4 months ago

    Hello,

    I don’t know if I may ask this question , but it has to do with firefox and css as I think.

    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>

    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>

    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 help.I tried many ways but the problem is the same .?can some one tell me how I can solve this problem with firefox .

    any idea is welkome.

    thanks

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello, I tried the following code on Firefox Developer Edition …

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

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

    I did not see any deviation on Firefox. The result was the same as what I could see in Google Chrome. Please see screenshot below.

    On Firefox Dev Edition

    In any case, this does not look like a WordPress issue, so it might be best for you to reach out to the developer of the JS library or raise an issue on their GitHub repo. Hope this helps. Good luck!

    Thread Starter johannes999

    (@johannes999)

    thanks,

    I see your code is OK.

    sorrry that I replied little too late.

    my css code is not working because of corrupted database .

    I have to install all from new then I see what happens with typewritter and I let you know .

    thanks again

    Thread Starter johannes999

    (@johannes999)

    your code is OK

    but I changed my mind because I see typewritter is not SEO friendly .

    thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘the typewriter animation has deviation only on firefox?t’ is closed to new replies.

Tags