ios bug html,html - Button bug only on IOS - Stack Overflow

The site that I am currently working on has a problem with a slider that I made, and it's driving me crazy.

Under the part called "Selected Customers" on this site, when on any ios device the arrows inside the buttons are wrongly placed and the button either does not work at all or very poorly.

I suspect that it's a problem with css support or css defaults for IOS-devices, because I don't run into the same problem on any other device. It happens on both chrome and safari. After debugging through my free trial on browserstack I couldn't really figure it out, and I can't afford to pay for a subscription.

This is the scss I wrote, where I think the fault lies:

.slideshow-customers{

width:100%;

display:flex;

flex-basis:auto;

position:relative;

#left-slide, #right-slide{

margin:auto;

top:0;

bottom:0;

z-index:2;

background:white;

border:0;

color:#18243f;

box-shadow: 0px 1px 5px 1px rgba(204,204,204,0.6);

border-radius: 50%;

line-height:1.8em;

font-size:1.8em;

height:1.8em;

width:1.8em !important;

overflow:hidden;

cursor:pointer;

display:flex;

& .fas.fa-chevron-left, & .fas.fa-chevron-right{

margin:auto;

box-sizing:border-box;

color: rgba(24,36,63,0.8);

}

& .fas.fa-chevron-left{

transform:translateX(-2px) !important;

-webkit-transform: translate3d(-2px,0,0) !important;

-ms-transform: translateX(-2px) !important;

}

& .fas.fa-chevron-right{

transform:translateX(2px) !important;

-webkit-transform: translate3d(2px,0,0) !important;

-ms-transform: translateX(2px) !important;

}

}

Any insight is highly appreciated!