- Solved
- Archived
the typewriter animation has deviation only on firefox?the first 3-4 letters is not showing!
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… (read more)
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