Safari Scrollbar Media Query

[mariomc]

• Swiper Version: v6.7.0 (happens with all, really 😅 )
• Platform/Target and Browser Versions: macOS Safari (14.1.1) but happens with all. Only happens when the page has vertical overflow AND the user has a scrollbar setting on "always visible" or has a mouse connected

What You Did

When in visible scrollbar mode, macOS Safari discounts the width of the scrollbar to the window.innerWidth for its own media queries.
This creates a dissonance between swiper and how media queries are enacted for those devices

https://stackblitz.com/edit/swiper-demo-1-default-c22ogy?file=index.html

Expected Behavior

The logic used by Swiper breakpoint election should mirror the CSS media queries behaviours in all devices

Actual Behavior

To test this out, go to System Preferences > General and either turn the "Always" option ON or have a mouse connected with "Automatic based on mouse or trackpad" (default for macOS)

After that is done use Safari to go to: https://swiper-demo-1-default-c22ogy.stackblitz.io

When in a resolution around 15px (or the width of the scrollbar) of the edge of the breakpoints you can notice the mismatch between an element shown using CSS media queries and the breakpoints used in Swiper.

Screen.Recording.2021-06-16.at.10.50.25.mov

I'll open a PR fixing the issue soon after. 😄