How to use IntersectionObserer with transform: scale()?

Question

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>