Swiper carousel navigation invisible but working?

Question

I have a website that uses Swiper carousel, link here: https://jom-tolong.herokuapp.com

The problem is that the navigation elements are invisible but works, the pagination isn't affected. This only happens in Safari and Chrome, on Firefox, everything works and looks fine.

Here's the relevant code:

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>

Thanks for reading!

Answer 1

There's a css in your body tag

text-rendering: optimizeSpeed;

this is causing the issue I believe kindly make it auto or add another css to swiper button

.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;
}

Do check if its working.