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

Question

我有一个页面，我要求我的用户用他们的相机拍照。然后我展示照片并询问他们是否要重新拍摄或确认照片。应该有两个不同样式的按钮，但有时 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，但似乎问题出在其他地方，因为有时它显示正确的视图，有时却没有。

Answer 1

问题出在 CSS 属性过滤器：

.base { 
  filter: brightness(1);

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

css 过滤器在 safari 和移动设备上运行缓慢，当屏幕旋转或 DOM 更改时，它可能会导致错误。通过为我的 class 删除触摸屏设备的过滤器属性解决了问题，因为悬停对他们来说不是必需的：

.base {

...

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

    &:hover {
      filter: none;
    }
  }
}

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

Safari on iOS randomly duplicates button style from the next button

css

safari

mobile-safari

ios

reactjs