From be162a8ae96433cfae4c7231b5191eddfacc60e9 Mon Sep 17 00:00:00 2001 From: evazion Date: Fri, 5 Mar 2021 18:22:47 -0600 Subject: [PATCH] Fix #4746: Related tags checkboxes don't work properly on some phones (iOS). Only use hover to hide the checkboxes on devices that support hovering (i.e. computers with a mouse). On some mobile devices, a tap is used to emulate hovering, which meant the tag had to be tapped twice. --- .../src/styles/specific/related_tags.scss | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/app/javascript/src/styles/specific/related_tags.scss b/app/javascript/src/styles/specific/related_tags.scss index 03930c453..66cc8dd38 100644 --- a/app/javascript/src/styles/specific/related_tags.scss +++ b/app/javascript/src/styles/specific/related_tags.scss @@ -15,11 +15,6 @@ div.related-tags { width: 15em; } - /* Hide the related tag checkbox unless it's checked or hovered. */ - input[type="checkbox"] { - visibility: hidden; - } - li.selected a { /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke */ /* https://caniuse.com/text-stroke */ @@ -27,7 +22,14 @@ div.related-tags { text-stroke: 0.5px; } - li.selected, li:hover { - input[type="checkbox"] { visibility: visible; } + /* On computers with a mouse, hide the related tag checkbox unless it's checked or hovered. */ + @media (hover: hover) { + input[type="checkbox"] { + visibility: hidden; + } + + li.selected, li:hover { + input[type="checkbox"] { visibility: visible; } + } } }