Primero, estoy usando Swiper , efecto "coverflow" y esta es mi configuración:

 const testSwiper = new Swiper('.test-swiper', { effect: "coverflow", grabCursor: true, centeredSlides: true, spaceBetween: 30, centeredSlides: true, slidesPerView: "auto", coverflowEffect: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows: true, }, direction: 'horizontal', loop: true, lazy: true, mousewheel: false, freeMode: false, keyboard: { enabled: false, }, // Pagination pagination: { el: '.swiper-pagination', clickable: true, dynamicBullets: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, scrollbar: { el: '.swiper-scrollbar', hide: true, }, });

El tema es que a veces cuando cargas la página verás algo como esto .

La única forma en que puede hacer desaparecer este extraño diseño es cambiar el tamaño de la pantalla y verá esto .

Y realmente no tengo idea de por qué y no tengo idea de cómo depurar este problema, así que espero que alguien me pueda dar algún consejo sobre cómo depurar o tal vez alguna idea sobre este problema.

Gracias por adelantado.