Навигация карусели Swiper невидима, но работает?

Question

У меня есть веб-сайт, на котором используется карусель Swiper, ссылка здесь: https://jom-tolong.herokuapp.com/

Проблема в том, что элементы навигации невидимы, но работают, на разбиение на страницы не влияет. Такое бывает только в Safari и Chrome, в Firefox все работает и выглядит нормально.

Вот соответствующий код:

Javascript

<script>
    var swiper1 = new Swiper ('.swiper1', {
        direction: 'horizontal',
        loop: 'false',
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
              el: '.swiper-pagination'
        },
        breakpoints: {
          767: {
            slidesPerView: 3,
            spaceBetween: 200
          },
          992: {
            slidesPerView: 4,
            spaceBetween: 245
          },
          1200: {
            slidesPerView: 5,
            spaceBetween: 270
          }
        }
    })

    var swiper2 = new Swiper ('.swiper2', {
        direction: 'horizontal',
        loop: 'false',
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
              el: '.swiper-pagination'
        },
        breakpoints: {
          767: {
            slidesPerView: 3,
            spaceBetween: 200
          },
          992: {
            slidesPerView: 4,
            spaceBetween: 245
          },
          1200: {
            slidesPerView: 5,
            spaceBetween: 270
          }
        }
    })
</script>

HTML

<div class="swiper-container swiper1">
<div class="swiper-wrapper">
    <% @helps.each do |help| %>
        <div class="swiper-slide">
            <div class="card">
                <%# <div class="card-img"></div> %>
                <div class="card-text">
                    <p class="card-heading"><%= help.user.name %></p>
                    <p class="tag"><%= help.help_type %></p>         
                    <p class="card-subheading"><%= help.district.name %>, <%= help.district.state.name %></p>
                    <p class="card-paragraph"><%= help.description %></p>
                </div>
                <%= link_to 'Help', "https://wa.me/60#{help.user.phone_number}", target: "_blank", class: "card-link" %>
            </div>
        </div>
    <% end %>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>

Спасибо за прочтение!

Answer 1

В теге вашего тела есть css

text-rendering: optimizeSpeed;

это вызывает проблему, я считаю, что любезно сделайте это автоматически или добавьте еще один css для кнопки swiper

.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
    text-rendering: auto;
}

Проверьте, работает ли он.