animation lagging in Firefox - html

Question

I am trying to animate my logo with CSS.
It works fine in browsers like Opera, Chrome, Edge but lags in Firefox. I tried adding the vendor prefixes like -moz- , -o-, -webkit- to animation, animation-delay and transform but still it is lagging only in Firefox.
Here is the fiddle link click here
scrollbar css also not working only in Firefox
html::-webkit-scrollbar {
width: 10px;
}
html::-webkit-scrollbar-track {
background-color: white;
}
html::-webkit-scrollbar-thumb {
background: var(--colorMain);
}
html::-moz-scrollbar {
width: 10px;
}
html::-moz-scrollbar-track {
background-color: white;
}
html::-moz-scrollbar-thumb {
background: var(--colorMain);
}

Answer 1

First you need to remove the display: contents; in your .wrapper span and the animation will play smoothly.
.wrapper span {
/* display: contents; */
-webkit-text-stroke-width: 1.5px;
text-shadow: 0 0px var(--brShadow), 0 0px var(--tlShadow);
transform: translate(0, 100%) rotate(2deg);
animation: jump 2s ease-in-out infinite;
color: var(--colorMain);
}
To solve the second problem, add scrollbar-color: var(--colorMain) white; property to the html class, because Firefox scrollbar to customize differently.
html {
font-size: 63.5%;
overflow-x: hidden;
scroll-padding-top: 6rem;
scroll-behavior: smooth;
text-decoration: none;
scrollbar-color: var(--colorMain) white; /* new line */
}
:root {
--colorMain: #4784e6;
}
* {
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
}
html {
font-size: 63.5%;
overflow-x: hidden;
scroll-padding-top: 6rem;
scroll-behavior: smooth;
text-decoration: none;
scrollbar-color: var(--colorMain) white; /* new line */
}
html::-webkit-scrollbar {
width: 10px;
}
html::-webkit-scrollbar-track {
background-color: white;
}
html::-webkit-scrollbar-thumb {
background: var(--colorMain);
}
/* header section */
section {
padding: 5rem 10%;
}
a {
text-decoration: none;
}
.header span {
font-size: 3rem;
background: rgba(255, 255, 255, 0.2);
color: var(--colorMain);
border-radius: 0.5rem;
padding: 0.1rem 0.1rem;
}
.wrapper {
width: max-content;
margin-left: 2rem;
margin-right: 2rem;
}
.wrapper span {
/* display: contents; */
-webkit-text-stroke-width: 1.5px;
text-shadow: 0 0px var(--brShadow), 0 0px var(--tlShadow);
transform: translate(0, 100%) rotate(2deg);
animation: jump 2s ease-in-out infinite;
color: var(--colorMain);
}
.wrapper span:nth-child(1) {
animation-delay: 120ms;
}
.wrapper span:nth-child(2) {
animation-delay: 240ms;
}
.wrapper span:nth-child(3) {
animation-delay: 360ms;
}
.wrapper span:nth-child(4) {
animation-delay: 480ms;
}
.wrapper span:nth-child(5) {
animation-delay: 600ms;
}
.wrapper span:nth-child(6) {
animation-delay: 720ms;
}
#keyframes jump {
33% {
text-shadow: 0 10px rgb(64, 206, 206), 0 15px #aadef2;
}
50% {
transform: translate(0, 0) rotate(-4deg);
text-shadow: 0 0px #8fc0a9, 0 0px #84a9ac;
}
66.67% {
text-shadow: 0 -10px rgb(64, 206, 206), 0 -15px #8fc0a9;
}
}
<section class="header">
<a href="#" class="logo text-decoration-none">
<div class="wrapper">
<span>T</span>
<span>R</span>
<span>A</span>
<span>V</span>
<span>E</span>
<span>L</span>
</div>
</a>
</section>