仅 IOS 上的按钮错误

Question

我目前正在使用的网站存在我制作的滑块问题，这让我抓狂。

在 this site 上名为 "Selected Customers" 的部分下，当在任何 ios 设备上时，按钮内的箭头位置错误并且按钮根本不起作用或非常差.

我怀疑 css 支持或 css 默认设置有问题 IOS-devices，因为我没有运行在任何设备上遇到同样的问题其他设备。它发生在 chrome 和 safari 上。在 browserstack 上通过我的免费试用进行调试后，我真的弄不明白，而且我付不起订阅费。

这是我写的css，我觉得错在哪里：

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

非常感谢任何见解！

Answer 1

为了使人字形居中，而不是硬编码以像素为单位的精确偏移，使其成为宽度的百分比：

-webkit-transform: translate3d(-50%,0,0) !important;

当我点击按钮时，网络检查器出现错误：

我不是前端开发人员，但也许这可以为您指出确切的问题。

您可以使用桌面 Safari 和 iOS 设备或 iOS 模拟器调试您的网站。 https://support.brightcove.com/debugging-mobile-devices

Answer 2

iOS Safari 默认对其按钮元素应用 1em 水平填充。由于按钮的字体大小非常大（16px 的 1.8em 等于 ~29px），此填充导致按钮的宽度扩展到 ~58px（ 29px * 2), 并将内部图标推离中心。

为了您的目的，重置填充可能足以获得您要查找的内容：

.slideshow-customers {
  ...
  #left-slide, #right-slide {
    ...
    padding: 0;
  }
}

仅 IOS 上的按钮错误

Button bug only on IOS

html

css

mobile-safari

ios