fix: enhance hover variant to include pointer fine media query

[DotwoodMedia]

Added an extra check that disables hover on chrome mobile. At the moment hover remains active in the latest version of chrome

[philipp-spiess]

@DotwoodMedia Hey! Appreciate the PR but it seems redundant to add this. Do you have any information on what Chrome mobile device is affected by a bug there? What version of Chrome is this device running, etc?

[DotwoodMedia]

Hi @philipp-spiess the hovers are now active on Chrome, but we don't really want hovers there since they don't seem relevant, right? The device is running Chrome 134.0.6998.135

[Vincentdevreede]

@philipp-spiess I can confirm the findings shared by @DotwoodMedia see my attachments for further reference.

• iOS correctly applies the a:hover CSS selector as expected.
• Android respects the @media (hover: hover) condition and applies a:hover styles accordingly — however, this is not desirable behavior on a mobile touch device, as it implies hover capabilities that typically aren't present on touchscreens.

You can verify this yourself at: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

Android.mp4

iOS.mp4

[Vincentdevreede]

@DotwoodMedia a temporary solution could be to create a custom variant for hover

css/main.css

@custom-variant hover {
  @media (hover: hover) and (pointer: fine) {
    &:hover {
      @slot;
    }
  }
}