I have a menu with css snaps that works perfectly with IntersectionObserver, just using opacity. But when I add transform:scale() it doesn't work, or it flickers on mobile devices. What is the solution for this? In the browser it works perfectly, but on mobile devices it keeps blinking.The problem is when i try to change any transform:.
const cards = document.querySelectorAll('.card')
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((elem) => {
if (elem.isIntersecting) {
cards.forEach(e => {
e.classList.remove('active')
})
elem.target.classList.add("active");
}
});
}, {
rootMargin: "0px",
threshold: 0.5
}
);
document.querySelectorAll('.card').forEach(elem => observer.observe(elem));.gallery {
position: relative;
max-width: 800px;
padding: 0 10;
}
.gallery_scroller {
scroll-snap-type: x mandatory;
overflow-x: scroll;
overflow-y: hidden;
display: flex;
align-items: center;
height: 50vh;
}
.gallery_scroller .card {
scroll-snap-align: center;
scroll-snap-stop: always;
margin: 10px;
position: relative;
}
.card {
min-width: 75%;
min-height: 95%;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
background-color: red;
}
.card {
transform: scale(.9);
opacity: 0.2;
transition: 0.3s ease;
}
.card.active{
transform: scale(1.0);
opacity: 1;
}<div class="gallery">
<div class="gallery_scroller">
<div class="card active">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>
</div>