Layout shift when resizing window with auto slidesPerView, centeredSlides and centeredSlidesBounds

[danis039]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/s/swiper-centered-auto-forked-u4cyfj

Bug description

When slidesPerView is auto, centeredSlides and centeredSlidesBounds are true, and .swiper-slide has width: auto, the position of items shifts from left to right, as you resize the screen for smaller widths. This happens only when the viewport width is wider than the space taken by slides. A random translate3d is applied to the .swipper-wrapper element in some cases.

https://user-images.githubusercontent.com/11977521/165947356-e0741812-bab3-4fc1-8c1c-0661f587e82a.mov

Expected Behavior

The layout should not shift on certain viewport widths when slides do not fill the whole viewport width

Actual Behavior

The layout is shifting on certain viewport widths (can be tested while resizing browser window) when slides do not fill the whole viewport width

Swiper version

8.1.4

Platform/Target and Browser Versions

Chrome

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

[huogui]

I have the same problem

[OliverOKoenig]

We have the same problem, too!

[TonioTSchwind]

We have the problem, too. It looks as if activeIndex is not stable, when both flags are set. This is a serious problem; on some view port widths the initial swiper starts with index unequal 0. This, therefore, does not happen only when the viewport is resized.

[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