iOS Safari 15 resize issue that is not your problem but may need a work around (workaround included)

[bobmagicii]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://twitter.com/bobmagicii/status/1448768770432983043 https://streamable.com/xqq8me

Bug description

in iOS15, when the address/toolbar "animates" in and out of view by your finger scrolling up and down, this pummels the web app with window viewport resize notifications. Which then pummels the slider with them while you're trying to slide. The result is that if you don't slide perfectly left and right, you will cause the animated toolbar on safari to be stupid, and it will spam the hell out of those resize events. This makes this slider (and anything using touch events) spazzy as hell to use in iOS 15, as the resize events seem to interrupt, cancel, and then restart touch move events. this was not a problem in iOS 14.

Additionally in iOS 15, you can tap the [Aa] on the address bar and say "hide toolbar" which stops the animated crap, and also stops the slider from freaking out. Turning it back on then the crap behaviour continues.

In our app I worked around this by hacking the un-minified version of your compiled script to just flat out disable the listening for window resize events, as we have no cases where we care about window resize events. Interestingly enough this did not seem to break the responsiveness breakpoints as I sit here and resize the window, so as far as i am considered, problem solved for today.

This prevents the spazzy behaviour caused by iOS 15 safari's animated toolbar crap because you can't catch the events any more. If Apple does not address this soon, perhaps we need an init option for Swiper to work around it, wrapping those resize events with something like, if swiper.params.resizeWindowListen, or something.

Expected Behavior

No response

Actual Behavior

No response

Swiper version

6.5 and 7.0.8

Platform/Target and Browser Versions

iOS 15 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?

• [X] I'm willing to open a PR

[Bumpyshot]

Hey, Thank you for noticing this issue, i was looking for someone in my case ! Your workaround is not working on my side... I also notice that the pagination is not working, but it's related I guess...

[bobmagicii]

hey there, i attached the copy of the library i hacked that is working on our projects. it is the "ESM" "AIO" version of Swiper downloaded from his Getting Started CDN meaning you have to be doing things like

<script type="module">
import Swiper from "/some/web/path/swiper.js";

let Swinst = new Swiper({ ... });
</script>

only edits are with two lines commented out. i would love to help you with the other versions but i legit have no idea how to test them since all our projects here use the es6 module style.

swiper.txt

regarding the pagination - i had to update our site to fix the pagers going from 6 to 7 (i think thats what caused it) because they were left justified instead of centered. but also make sure you update the swiper-bundle.min.css dont forget to update the css files when you update the js files. if what i describe sounds like your pagination problem

.swiper-pagination { display: flex; justify-content: center; align-items: center; width: 100%; }
.swiper-pagination-bullet { margin: 3px; padding: 3px; }

[EDIT UPDATE]

DONT FORGET IOS SAFARI CACHES THE EVERLOVING SHIT OUT OF EVERYTHING. to get it to load your edited script you might need to do things like add ?v=omfg1 to the url, or Settings App > Safari > Advanced (Very Bottom) > Website Data > search your domain name, delete all that cache after every failed attempt.

[avitorio]

If anyone is facing this issue with the React implementation I've managed to patch it by disabling resize on onAfterInit.

  const disableSwiperResize = (swiper) => {
    if (swiper.device.ios) {
      swiper.resize.removeObserver();
      window.removeEventListener(
        'resize', swiper.resize.resizeHandler
      );
    }
  };
  
  <Swiper onAfterInit={disableSwiperResize} >

[Bumpyshot]

still the same problem with both method, I call the script and the CSS from the min swiper file, unfortunately, I'm not using react...

[Heewookji]

imagesReady: () => {
  if (this.$refs.mySwiper.$swiper.device.ios) {
    window.removeEventListener('resize', this.$refs.mySwiper.$swiper.resize.resizeHandler);
  }
},

If u are using vue-awesome-swiper Inject imagesReady method into swiperOptions. This solved my problem.

[devsepnine]

remove the resizing event, no problem with the slide, but if you use the centralized slide as true, center cannot be aligned when changing directions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[websuits]

This issue still persists, scrolling on browser that resize will re-init the slider. Tested all versions including latest.