先日Swiperについてのことを書いたところですが、次につまづいたところも原因は同じようなところにありました。

スライダープラグイン「Swiper」で swiper-button が表示されなかった原因

現象

Swiperで設置した連続して動くカルーセルスライダーが、ある環境でのみ高速にスライドしてしまう。それはもう爆速。

各設定は下記の通りで、各スライドごとにストップせずに連続して流れるようにしています。

<script>
  const mySwiper = new Swiper('.swiper-container', {
    loopedSlides: 3,
    slidesPerView: 1,
    speed: 8000,
    loop: true,
    autoplay: {
      delay: 0,
      disableOnInteraction: false,
    },
  })
</script>

.swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

これが、大抵はうまく表示されているのに、ある環境でのみダメ。

原因

個々のOSでのアクセシビリティの設定と、reset.cssの記述とのバッティングでした。

reset.cssのこの部分。

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

各デバイスで「視覚効果」や「視差効果」をなくすまたは減らす設定をしている場合、上記の記述が有効になり、アニメーションが0.01msの速さで動くという。

解決法

今回はとりあえずreset.cssの上記部分をコメントアウトして解決しました。swiperの方のCSSに設定を上書きするのもいいと思います。

ただアクセシビリティにも配慮した解決法はもっと他にありそうですね。