I'm using Intersection Observer to add a class to specific elements as they enter the viewport. The class triggers a CSS animation.
Specifically, I'm adding .swipe to any .highlight elements that enter the viewport.
In Firefox only, the animation runs on time but gets cut about 20% short.
<div class="description">
<p><span class="highlight">Travel companion app</span> that displays nearby restaurants, hotels...</p>
</div>
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('swipe')
}
})
});
document.querySelectorAll('.highlight').forEach((i) => {
if (i) {
observer.observe(i);
}
});.highlight {
color: black;
background-color: white;
padding-left: 5px;
padding-right: 5px;
}
.swipe {
position: relative;
width: fit-content;
}
.swipe::after {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
right: 100%;
width: 0%;
height: 100%;
background-color: black;
animation: swipe 1.5s ease-out 1s forwards;
}
.swipe--delay::after {
background-color: black;
animation-delay: 1.5s;
}
.swipe h1 {
color: black;
opacity: 0;
animation: fade 0.01s ease-out 1.75s forwards;
}
.swipe h2,
.swipe h3 {
color: black;
opacity: 0;
animation: fade 0.01s ease-out 2.25s forwards;
}
@keyframes swipe {
0% {
right: 100%;
left: 0;
width: 0%;
}
50% {
right: 0;
left: 0;
width: 100%;
}
100% {
right: 0;
left: 100%;
width: 0%;
}
}The .description div had a text-align: justify property. Firefox seems to calculate the width of justified inline elements differently than other browsers. There may be another way to fix this, but for now I'm happy removing the text-align: justify property altogether.