:hover animation effects don't work on touchscreen computers

Bug reports
, ,
1

Steps to reproduce

  1. Be on a computer/laptop with touchscreen, and a mouse/touchpad connected.
  2. Open a sandbox obsidian vault.
  3. Hover over buttons that should have a background :hover effect (such as the minimize, restore down, and close buttons).

Did you follow the troubleshooting guide? [Y/N]

Y

Expected result

When hovering over (most) buttons, there should be a background change.

Actual result

There is no background change or any other indication of hovering shown.

Environment

SYSTEM INFO:
Obsidian version: v1.8.10
Installer version: v1.8.10
Operating system: Windows 11 Pro 10.0.26100
Login status: not logged in
Language: en
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none

Additional information

Video demonstration: https://files.catbox.moe/95ho8y.mp4

The technical problem and fix:
This problem is caused by the usage of @media (hover: hover) {} ([MDN Docs] (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover)) around usages of :hover.
hover detects if the primary input device can conveniently hover.

[any-hover] (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-hover) should be used instead. It detects if any of the input devices can conveniently hover.
This should just be a simple find and replace ( @media (hover: hover) → @media (any-hover: hover) ).

(Note: There’s currently a [bug in Chromium] (https://issues.chromium.org/issues/394519480) (it’s marked as fixed, but has reemerged) that will cause any-hover to not immediately fix the issue. Once the Chromium bug is resolved, any-hover should fix this issue.)

1 Like
2

Sorry, but the change you are proposing is going to break other things in other platforms.
It’s unlikely that we do it.

3

How would any-hover break it for platforms?

4

The any-hover CSS media feature can be used to test whether any available input mechanism can hover over elements

The issue is that any-hover looks at all available input methods. We use the media query to prevent an issue on iOS where :hover is applied and never removed when touching an element.

If we switch to any-hover, this re-introduces the issue if you are using a tablet with an external mouse/trackpad. An input mechanism supports hover, therefore tapping will cause :hover to be incorrect applied.

5

I guess.
Personally I’d want hover effects even when using touchscreen, and even if I didn’t that seems not nearly as bad of a problem as having no hover effects when using a trackpad/mouse.
Plus if there’s a trackpad/mouse attached, I’d think that you’re probably using the touchpad.

But it doesn’t really matter to me, I was able to fix it for myself.