Resize or orientation change with virtual slides leads to slides not fully visible

[realityfilter]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://realityfilter.github.io/bugreport-swiper-virtual-resize/

Bug description

Sample code can be found here: https://github.com/realityfilter/bugreport-swiper-virtual-resize

Steps to reproduce:

• open https://realityfilter.github.io/bugreport-swiper-virtual-resize/
• swipe to slide 3 or 4
• resize the browser window (extreme width may help, not always visible, but can be inspected)
• the the left style attribute of some slides begin to have the wrong old value, because the slide is rerendered with stale data from virtualData.offset
• this can be seen as slides only half visible or no slide visible at all
• it is easier to see this happen on an iPhone when changing orientation

In modules/virtual/virtual.js a resize is triggering an update() without force being set. https://github.com/nolimits4web/swiper/blob/057fa60219f4ffea66452150ae6f0c2e64340dec/src/modules/virtual/virtual.js#L93-L99

This changing of only the style attribute is not enough. Sometimes some slides are getting rerendered because of class attribute changes. This rendering uses the old stale virtualData.

Setting renderExternal and renderExternalUpdate is no workaround because the update function returns early.

Expected Behavior

The virtual data for the slides should be updated to have the current offset value present.

Actual Behavior

Rerendering some slides overwrite correct offset style attribute with stale data.

Swiper version

7.2.0

Platform/Target and Browser Versions

Chrome, Safari, Firefox

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

[chwan97]

This is definitely a bug

[ilopsource]

Is this problem solved now?

[realityfilter]

Unfortunately not. Because a bugfix is affecting the core and therefore all implementations a guidance for a possible solution from the core developers is needed.

[MaxZhurin]

on node_modules\swiper\modules\virtual\virtual.js 106 line need add one line swiper.update();

It fixes those bugs. But the resize remains a bit twitchy, that's another story

if (swiper.slidesGrid !== previousSlidesGrid && offset !== previousOffset) { swiper.slides.css(offsetProp, ${offset}px); swiper.update(); }

[hunterliu1003]

I have same issue It took me two days. I finally fixed it through force update the virtual swiper on resize.

function resize(e: SwiperInstance) {
  nextTick(() => {
    e.virtual.update(true)
  })
}

<Swiper
  virtual
  ...
  @resize="resize"
>
  <SwiperSlide>...</SwiperSlide>
</Swiper>

There is a function swiper.virtual.update(force) specific for the virtual swiper in https://swiperjs.com/swiper-api#virtual-slides-methods

[nolimits4web]

Issue is closed because of outdated/irrelevant/not actual/needed more information/inactivity.

If this issue is still actual and reproducible for latest version of Swiper, please create new issue and fill the issue template correctly:

• Clearly describe the issue including steps to reproduce when it is a bug.
• Make sure you fill in the earliest version that you know has the issue.
• Provide live link or JSFiddle/Codepen or website with issue