仅在 IOS 上的按钮错误答案

【问题标题】：Button bug only on IOS仅在 IOS 上的按钮错误
【发布时间】：2019-08-09 05:49:07
【问题描述】：

我目前正在处理的网站有一个我制作的滑块有问题，这让我发疯了。

在this site 上名为“选定客户”的部分下，当在任何 ios 设备上错误地放置按钮内的箭头时，该按钮要么根本不起作用，要么非常差。

我怀疑这是 IOS 设备的 css 支持或 css 默认设置的问题，因为我在任何其他设备上都没有遇到同样的问题。它发生在 chrome 和 safari 上。在浏览器堆栈上通过免费试用进行调试后，我真的无法弄清楚，而且我付不起订阅费用。

这是我写的scss，我认为问题出在哪里：

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

高度赞赏任何见解！

【问题讨论】：

在您的right() 函数中，您将一个无效的选择器传递给querySelector() 的第一次调用。请先尝试修复该问题，然后查看按钮行为是否仍有问题。
@raviramani 这与 DisableR 在他们的回答中指出的错误相同。这不是 JavaScript 语法错误——而是 CSS 错误。某些浏览器的后备行为可能比其他浏览器更灵活。

标签： html ios css mobile-safari

【解决方案1】：

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

出于您的目的，重置填充可能足以获得您正在寻找的内容：

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

【讨论】：

这是最合乎逻辑的答案。非常感谢！

【解决方案2】：

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

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

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

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

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

【讨论】：