Angular 12 or 13 - latest swiper - iPhone - Chrome - clunky swipe

[heitorb]

I opened this a few months ago and it was pointed to a duplicate that has since been closed with "not a swiper issue". I mean, it doesn't work right on iOS Chrome, which is a big deal. If it can't be fixed, could you at least provide some feedback about why it can't work on iOS Chrome? Hard to see why Chrome can't perform a smooth transition. Under the hood it's standard JS/css animation.

[VibrandDesign]

I can only agree. It also seems to be partly quite arbitrary when swiping is smooth and when it is not.
However, for me the problem does not occur with the Angular version, but with the CDN version. I also use a very simple setup for my swiper, yet the animation is not smooth.

Here is the JavaScript I use:

const clonablesSwiper = new Swiper('#webflow-cloneable-slider', {
  direction: 'horizontal',
  slidesPerView: 1,
  spaceBetween: 16,
  navigation: {
    nextEl: '#next-cloneable',
    prevEl: '#prev-cloneable',
  },
  scrollbar: {
    el: '#cloneable-scrollbar',
    draggable: true
  },
  breakpoints: {
    // when window width is >= 992px
    992: {
      slidesPerView: 3,
      spaceBetween: 32
    },
    // when window width is >= 768px
    768: {
      slidesPerView: 2,
      spaceBetween: 24
    },
  }
});

Below are also 2 more videos demonstrating the problem.

Chrome (clunky transition): https://user-images.githubusercontent.com/32710392/148682440-f124f6e1-6d03-451d-a340-1b86c8b52314.mov

Safari (everything as it should): https://user-images.githubusercontent.com/32710392/148682454-39573f5a-6c5b-438a-b761-ebb926176e62.mov

This seemingly buggy transition animation has been occurring for months.

[adrianmanduc]

Any updates on this ?

[vltansky]

could you provide reproduction in codesandbox / stackblitz?

[christianaxtmn]

I can only agree. It also seems to be partly quite arbitrary when swiping is smooth and when it is not. However, for me the problem does not occur with the Angular version, but with the CDN version. I also use a very simple setup for my swiper, yet the animation is not smooth.

Here is the JavaScript I use:

const clonablesSwiper = new Swiper('#webflow-cloneable-slider', {
  direction: 'horizontal',
  slidesPerView: 1,
  spaceBetween: 16,
  navigation: {
    nextEl: '#next-cloneable',
    prevEl: '#prev-cloneable',
  },
  scrollbar: {
    el: '#cloneable-scrollbar',
    draggable: true
  },
  breakpoints: {
    // when window width is >= 992px
    992: {
      slidesPerView: 3,
      spaceBetween: 32
    },
    // when window width is >= 768px
    768: {
      slidesPerView: 2,
      spaceBetween: 24
    },
  }
});

Below are also 2 more videos demonstrating the problem.

Chrome (clunky transition): https://user-images.githubusercontent.com/32710392/148682440-f124f6e1-6d03-451d-a340-1b86c8b52314.mov

Safari (everything as it should): https://user-images.githubusercontent.com/32710392/148682454-39573f5a-6c5b-438a-b761-ebb926176e62.mov

This seemingly buggy transition animation has been occurring for months.

did you find a fix?

[Lloydinator]

I'm currently experiencing this. For Safari, they said I should add -webkit-backface-visibility: hidden; backface-visibility: hidden;. But even after adding equivalents for other browsers it's still buggy. It works well on Android Chrome so I don't understand why it doesn't work well on iOS Chrome.

[nolimits4web]

New Swiper v9 doesn't have Angular components anymore, it is recommended to use new Swiper Web Components instead.