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.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
Ezalaki modifié na cor-el
Solution eye eponami
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.
Tanga eyano oyo ndenge esengeli 👍 0All Replies (2)
Solution eye oponami
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.
thanks for your advice. johan