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!
iOS Safari applies a 1em horizontal padding by default to its button elements. Since your buttons' font-size is quite large (1.8em of 16px equals ~29px), this padding is causing the width of the button to expand to ~58px (29px * 2), and pushing the inner icon off-center.
For your purposes, resetting the padding may be enough to get what you're looking for:
.slideshow-customers {
...
#left-slide, #right-slide {
...
padding: 0;
}
}