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

Question

我有一个页面，请用户用他们的相机拍照。 然后，我显示图片并询问他们是否要重新拍摄，或确认照片。 应该有两个具有不同样式的按钮，但是Safari有时会显示两个相同的按钮 。 似乎第二个按钮显示在第一个按钮的顶部，而分别显示在下面，但是尽管如此，它们都可以正常工作。

预期结果

该平台写在react上，应该拍照的屏幕上有一个按钮 ，即Primary。

我还尝试为按钮赋予不同的ID，以避免野生动物园在第二个屏幕中为这两个元素重复使用主按钮，但这无济于事。

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

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

.base {

...

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

    &:hover {
      filter: none;
    }
  }
}