Tengo un menú con instantáneas css que funciona perfectamente con IntersectionObserver, solo usando opacidad. Pero cuando agrego transform:scale() no funciona o parpadea en los dispositivos móviles. ¿Cuál es la solución para esto? En el navegador funciona perfectamente, pero en los dispositivos móviles sigue parpadeando. El problema es cuando trato de cambiar cualquier transformación:.
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>