diff --git a/web/src/ui_util.ts b/web/src/ui_util.ts
index 287ef8fa15..564c1e8986 100644
--- a/web/src/ui_util.ts
+++ b/web/src/ui_util.ts
@@ -194,12 +194,12 @@ export function update_unread_mention_info_in_dom(
 ): void {
     const $unread_mention_info_span = $unread_mention_info_elem.find(".unread_mention_info");
     if (!stream_has_any_unread_mention_messages) {
-        $unread_mention_info_span.hide();
+        $unread_mention_info_span.toggleClass("no-display", true);
         $unread_mention_info_span.text("");
         return;
     }
 
-    $unread_mention_info_span.show();
+    $unread_mention_info_span.toggleClass("no-display", false);
     $unread_mention_info_span.text("@");
 }
 
diff --git a/web/styles/app_components.css b/web/styles/app_components.css
index 8c07f7c5c7..68181af7d9 100644
--- a/web/styles/app_components.css
+++ b/web/styles/app_components.css
@@ -645,6 +645,10 @@ input.settings_text_input {
     opacity: var(--opacity-unread-mention-info);
 }
 
+.unread_mention_info.no-display {
+    display: none;
+}
+
 /* Implement the web app's default-hidden convention for alert
    elements.  Portico pages lack this CSS and thus show them by
    default. */