Javascript Swiper转盘导航不可见但工作正常？

我有一个使用旋转木马的网站，链接如下：

问题是导航元素是不可见的，但可以工作，分页不受影响。这只发生在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>

var swiper1=新的Swiper（'.swiper1'{
方向：'水平'，
循环：“false”，
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”，
},
分页：{
el:“.swiper分页”
},
断点：{
767: {
幻灯片视图：3，
间隔：200
},
992: {
幻灯片视图：4，
间隔：245
},
1200: {
幻灯片浏览：5，
间隔：270
}
}
})
var swiper2=新的Swiper（'.swiper2'{
方向：'水平'，
循环：“false”，
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”，
},
分页：{
el:“.swiper分页”
},
断点：{
767: {
幻灯片视图：3，
间隔：200
},
992: {
幻灯片视图：4，
间隔：245
},
1200: {
幻灯片浏览：5，
间隔：270
}
}
})

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>

---

谢谢你的阅读

你的body标签中有一个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;
}

---

一定要检查它是否工作。

你的body标签中有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;
}

---

一定要检查它是否工作。

它工作了，非常感谢！！只是想知道为什么这只是Chrome和Safari中的一个问题，而不是Firefox？实际上，

文本呈现

不是一个标准。所以我认为这是渲染引擎的兼容性问题。Chrome和Safari是基于Webkit渲染引擎的，而Firefox是基于gecko渲染引擎的。它工作正常，非常感谢！！只是想知道为什么这只是Chrome和Safari中的一个问题，而不是Firefox？实际上，

文本呈现

不是一个标准。所以我认为这是渲染引擎的兼容性问题。Chrome和Safari基于Webkit渲染引擎，而Firefox基于gecko渲染引擎。