SwiperJS导航箭头在Chrome浏览器不显示问题求助

我在项目中使用Swiper JS，引入Navigation模块添加导航箭头，该功能在Firefox浏览器（移动端/桌面端）均可正常工作，但在所有Chrome浏览器中箭头均不显示，请问问题原因是什么？

所用CSS代码： #

.Swiper1 {
  width: 100%;
  height: 300px;
}
.SwiperSlide1 {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 0.3s ease;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-button-prev::after{
  font-size: 1.5rem;
  color: white;
  visibility: visible;
}

.swiper-button-next::after{
  font-size: 1.5rem;
  color: white;
}

所用JSX代码： #

<Swiper 
      navigation={true}
      loop={true} 
      modules={[Navigation,Autoplay]} 
      autoplay={{
        delay: 4000,
        disableOnInteraction: false,
      }}
      className="Swiper1">
  <SwiperSlide></SwiperSlide >
</Swiper>

注：SwiperSlide内包含图片（完整代码过长未展示）

可能的问题原因及解决办法： #

• 选择器优先级不足：Swiper内置的Chrome样式优先级可能高于自定义CSS，导致箭头样式被覆盖。解决办法是增强选择器特异性，用容器类名嵌套：

.Swiper1 .swiper-button-prev::after,
.Swiper1 .swiper-button-next::after {
  font-size: 1.5rem;
  color: white;
  visibility: visible;
  opacity: 1;
  display: block;
}

• Chrome隐藏属性渲染差异：仅设置visibility: visible不够，Chrome中Swiper默认可能给箭头设置了opacity: 0或display: none，这些属性优先级更高，需显式声明确保显示。

• 内置字体加载异常：Chrome对Swiper箭头的内置图标字体渲染有差异，若字体未加载成功会导致箭头不显示。可尝试用自定义字符替代内置图标：

.Swiper1 .swiper-button-prev::after {
  content: '←';
  font-size: 1.5rem;
  color: white;
}
.Swiper1 .swiper-button-next::after {
  content: '→';
  font-size: 1.5rem;
  color: white;
}

• 容器溢出裁切：检查.Swiper1是否设置了overflow: hidden，Chrome中箭头可能被容器边界裁切，而Firefox允许箭头超出容器显示。可调整容器padding或箭头position避免裁切。

内容的提问来源于stack exchange，提问作者Dastagir Shaikh