Breakpoint not working reliably when having a min-width configured on any parent element e.g. body

Ruben-check24 commented 6 months ago

Check that this is really a bug

[X] I confirm

Reproduction link

Bug description

Breakpoints work fine but as soon as I add a min-width to any parent Element of the swiper and its greater or equal to the breakpoint, it doesn't work reliably anymore when the window gets resized (slowly). I added a min-width of 1024px on a div above the swiper (common thing to do on desktop is to have such min-width on the body) and on the swiper I have a breakpoint at 1024px to show 5 slides. The effect/bug is even more noticeable/occurs more often when the min-width of the div is greater than the breakpoint. You have to resize the window pretty fast for swiper to react to it correctly. With breakpointBase="container" it seems to work perfectly fine.

Similar Demo in react with different values which makes it more noticeable. min-with is much higher than the breakpoint: codesandbox

Demo VIdeo

https://github.com/nolimits4web/swiper/assets/92583338/41c8a874-0f6c-4276-8d58-4074de183279

Expected Behavior

No matter the "resize speed", breakpoint should be handled correctly and reliably when a parent element has a 'min-width' set

Actual Behavior

When a parent Element has a min-width that is equal or larger than the breakpoint, the breakpoint does't trigger reliable anymore

Swiper version

11.1.0

Platform/Target and Browser Versions

macOS Chrome, Firefox, Safari

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

nolimits4web commented 6 months ago

t0ggles-create swiper

t0ggles[bot] commented 6 months ago

Task nolimits4web/SWIPER-88 was created

nolimits4web commented 5 months ago

Swiper uses ResizeObserver to trigger the resize logic (for better performance), so if its size not changed it will do nothing. You can disable resizeObserver parameter or use container as a breakpoints base

t0ggles[bot] commented 5 months ago

Task nolimits4web/SWIPER-88 status changed to Done

Ruben-check24 commented 5 months ago

thanks for looking into it and I get the rational behind it. I think it would be helpful to document this behaviour in the description for breakpoints and breakpointsBase

nolimits4web / swiper