Hover state becomes stuck after tap on iOS

[FlyersPh9]

Describe the bug (actual behavior)

When tapping a button on iOS, the button gets stuck in the :hover state. This likely effects all components that have a :hover state & after interaction you stay on the same page.

Reproduction

1. Open https://itwin.github.io/iTwinUI/css/button.html on iOS.
2. Tap button.

Additional information

I discovered this bug while working on a personal project and learned that this solution fixes the issue:

@media (hover: hover) {
  button:hover {
    border: 3px solid green;
  }
}

[AdamMeza-Bentley]

Thanks for reporting this bug, Jon! Someone, either one of the iTwinUI team or myself, will look at this soon.

[FlyersPh9]

While working on #1919 I was using @media (hover: hover) within .iui-field & discovered that CSS test images were failing to show the hover state on <button>. After some investigation with @rohan-kadkol we realized that removing @media (hover: hover) fixed the test image failures. This was a bit surprising because browser support for this media query seems to be pretty good.

[mayank99]

We might want to use any-hover instead of hover. The latter only takes into account the primary input device, which is arbitrarily decided by the operating system. See https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/#aa-whats-the-primary-input

The downside is that we'll have some false positives on hybrid/multi-modality devices, but it would still be better than the current situation.

[FlyersPh9]

@mayank99, what would be the best way to handle situations like this?

&:where(:hover, :active) {
  … 
}

Duplicate the CSS?

@media (any-hover: hover) {
  &:where(:hover) {
    … 
  }
}

&:where(:active) {
  … 
}

[FlyersPh9]

Also @media (any-hover: hover) is failing to work in our CSS BackstopJS image tests. 😞

[mayank99]

Duplicate the CSS?

Yeah, I think duplication should be fine, as long as :active provides a real benefit on touch devices.

Also @media (any-hover: hover) is failing to work in our CSS BackstopJS image tests. 😞

Maybe we should consider switching away from backstop to cypress or playwright, if it works better in the latter.