Search code examples
ioscssreactjssafarimobile-safari

Safari on iOS randomly duplicates button style from the next button

I have a page where I ask my user to take a picture with their camera. Then I show the picture and ask if they want to retake it, or confirm the photo. There should be two buttons with different styles, however sometimes safari shows two identical buttons. It seems as second button is shown on top of the first one and separately below, but nonetheless they both function as expected.

Expected result

The platform is written on react and the screen where the photo should be taken has one button, which is Primary.

I also tried giving the buttons different ids to avoid safari reusing primary button in the second screen for both elements, but that did not help.

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

Here is what I get:

<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>

I tried removing some css properties, or adding -webkit-appearance, but it seems that the issue is somewhere else as sometimes it displays correct view and sometimes it doesn't.

Solution

  • The issue was with CSS property filter:

    .base { 
  filter: brightness(1);

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

    css filter is slow on safari and for mobile devices when the screen rotates, or DOM changes it can cause a bug. Issue was solved by removing filter property for touchscreen devices for my class since hover is not a necessity for them:

    .base {

...

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

    &:hover {
      filter: none;
    }
  }
}