bug in page transition

[PouryaNoufallah96]

hello. i have a swiper in my main page and I also have global page transition In nuxt.config file. when i switch to another page and come back to the page that have swiper , it does not work any more and slides will disapear

[cpreston321]

Can you give me a reproduction on stackblitz ? Please 🙏🏼

[PouryaNoufallah96]

https://github.com/PouryaNoufallah96/nuxt3-swiper-sample

i think the problem is dir="rtl" for body tag and also page transition.
when you go to page 2 and then come back to page1 the slider not working correctly

[cpreston321]

Hey @PouryaNoufallah96 !

Thanks for the reproduction link. I will look into this as I suspect it being an upstream bug either with nuxt SSR or within swiper itself. I will let you know what I find!

Thanks,
Christian

[PouryaNoufallah96]

hey ! ok thank you so much

[SPH73]

Hello, I have this same issue, I have used the Swiper component on 3 pages and all three have the same issue where my CSS is respected on page refresh but when transitioning from page to page the CSS is lost until the page is refreshed again. I only noticed this behaviour today. Prior to this, I had only used it on 1 page. After adding Swiper to the other pages, I noticed that I couldn't make the component respect my CSS.

[cpreston321]

Follow Up

/cc: @SPH73 @PouryaNoufallah96: This does seem to be upstream.

Repo Link for reference: https://stackblitz.com/edit/github-gyz8yc

Looking further into the issue it seems that the app,layout transition causes Swiper to bug out on the some event dom calculation state. Swiper will try to run javascript on load and do certain runtime checks to figure width, height etc. Since Nuxt isn't showing the proper sizing it's like swiper has no idea so it's calculations are way off causing the swiper to bug out.

I'm not for sure really what to do, I would want to say take it up with the Swiper Core team and do a follow up with the repo link provided. In this case it's very odd.

My thought is that Swiper doesn't have the proper SSR support for vue making it hard to know if this a listener on the dom level doing calculation based on what it sees within the browser.

[nasirDoe]

Worked!!
workaround

const isInitialized = ref(false)

onMounted(() => {
 // my transition page is 300, when TIMEOUT set to 300 is not work. so must larger than transition page
  const TIMEOUT = 500 
  
   setTimeout(() =>{
       isInitialized.value = true
   }, TIMEOUT)
})

<Swiper v-if="isInitialized"></Swiper>