swiperjs arrows doesnt showup in chrome browser

Im using swiper js for a project and wanted the navigation arrows so i added navigation module. it does works in all firefox browser(mobile/desktop) but not in any chrome browser what is causing the problem?

css im using to change color of the arrow

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

html (JSX)

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

swiper slide basically have pictures.(the code is too long)