【vue-slick-carousel】safariで挙動が不安定(chromeだと正常に動く)

Question

実現したいこと

Vue.js 2.6.10
ruby 2.6.5
rails 6.0.3

閲覧いただきありがとうございます。
Vueのライブラリであるvue-slick-carousel(https://github.com/gs-shop/vue-slick-carousel)を導入してスライドを作成しました。

しかし、別添の動画のようにsafariだと挙動が不安定になってしまいます。
（具体的には、項目を移動させるボタンを押しても、動かないときがあり、連打すると動きます）

ソースコードは以下のとおりです。
原因や解決策についてご教示いただければ幸いです。

Chrome

Safari

矢印ボタンのソースコード

![

コード

SlickCarouselMixin.vue

<script>
import SlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

export default {

  components: {SlickCarousel},

  data: function () {
    return {
      slickOptions: {
        dots: true,
        arrows: true,
        swipe: false,
        slidesToScroll: 3,
        slidesToShow: 3,
        infinite: false,
        speed: 1000,
      },
    }
  }
}

</script>

<style>
.slick-prev, .slick-next{
  width: 0;
  height: 0;
  position: absolute;
  top: 40%;
}
.slick-prev{
  left: -30px;
}
.slick-next{
  right: 0;
}
.slick-prev:before, .slick-next:before {
  font-family: "Font Awesome 5 Free";
  font-size: 90px;
  color: #c7c7c7;
  line-height: 1;
  text-rendering: auto;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
}
.slick-prev:before {
  content: "‹";
}
.slick-next:before {
  content: "›";
}
.slick-prev.slick-disabled, .slick-next.slick-disabled {
  pointer-events: none;
  opacity: 0;
}
.slick-dots li.slick-active button:before {
  color: #86bc25;
}
.slick-slide > div {
  margin: 0.5rem;
}
.slick-slide li > a {
  padding: 1.25rem;
}
</style>

Show.vue

<template>
  <div>
    <div class="m-3 p-3">
      <SlickCarousel v-bind="slickOptions" class="other-item-list">
        <li v-for="test in tests">
          ・・・
        </li>
      </SlickCarousel>
    </div>
  </div>
</template>

<script>
import SlickCarousel from "../../../common/SlickCarouselMixin"
export default {
  mixins: [SlickCarousel],
・・・

</script>

<style>
.lb-nav a.lb-prev, .lb-nav a.lb-next {
  width: 50%;
}
.fadeIn {
  animation: fadeIn 0.4s;
}
</style>

Answer 1

疑似要素にも position: absolute を追加した

SlickCarouselMixin.vue

.slick-prev:before, .slick-next:before {
  font-family: "Font Awesome 5 Free";
  font-size: 90px;
  color: #c7c7c7;
  line-height: 1;
  text-rendering: auto;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  position: absolute;
}