iOS 上的 Safari 从下一个按钮随机复制按钮样式答案

【问题标题】：Safari on iOS randomly duplicates button style from the next buttoniOS 上的 Safari 从下一个按钮随机复制按钮样式
【发布时间】：2020-01-11 05:48:45
【问题描述】：

我有一个页面，我要求我的用户用他们的相机拍照。然后我展示照片并询问他们是否要重新拍摄，或者确认照片。应该有两个不同样式的按钮，但有时 safari 会显示 two identical buttons。似乎第二个按钮显示在第一个按钮的顶部并分别显示在下方，但它们都按预期工作。

Expected result

平台写在react上，应该拍照的屏幕有one button，是Primary。

我还尝试为按钮指定不同的 ID，以避免 Safari 对两个元素在第二个屏幕中重复使用主按钮，但这没有帮助。

<button class="Button_primary__I_6B6 Button_highlighted__xVkxB Button_base__Cb726" style="background-color: rgb(73, 197, 182);">Take photo</button>

这是我得到的：

<button class="Button_secondary__1goL3 Button_highlighted__xVkxB Button_base__Cb726" style="border-color: rgb(73, 197, 182); color: rgb(73, 197, 182);">Retake photo</button>
<button class="Button_primary__I_6B6 Button_highlighted__xVkxB Button_base__Cb726" style="background-color: rgb(73, 197, 182);">Confirm</button>

我尝试删除一些 css 属性，或添加 -webkit-appearance，但似乎问题出在其他地方，因为有时它显示正确的视图，有时却没有。

【问题讨论】：

标签： ios css reactjs safari mobile-safari

【解决方案1】：

问题在于 CSS 属性过滤器：

.base { 
  filter: brightness(1);

  &:hover {
    filter: brightness(1.15);
  }
}

当屏幕旋转或 DOM 更改时，Safari 和移动设备上的 CSS 过滤器速度很慢，这可能会导致错误。通过为我的班级删除触摸屏设备的过滤器属性解决了问题，因为悬停对他们来说不是必需的：

.base {

...

  @media (pointer: coarse) {
    filter: none;

    &:hover {
      filter: none;
    }
  }
}

【讨论】：