diff --git a/static/js/ui.js b/static/js/ui.js
index 0afc8fc039..ce78ad145e 100644
--- a/static/js/ui.js
+++ b/static/js/ui.js
@@ -511,6 +511,7 @@ function replace_floating_recipient_bar(desired_label) {
         new_label.css('display', 'table-row');
         new_label.attr("zid", rows.id(desired_label));
 
+        new_label.toggleClass('faded', desired_label.hasClass('faded'));
         old_label = desired_label;
     }
     show_floating_recipient_bar();
@@ -562,12 +563,6 @@ exports.update_floating_recipient_bar = function () {
         return;
     }
 
-    // Hide if the message is faded
-    if (current_label.hasClass('faded')) {
-        hide_floating_recipient_bar();
-        return;
-    }
-
     // Hide if our bottom is in our bookend (or one bookend-height
     // above it). This means we're not showing any useful part of the
     // message above us, so why bother showing the label?
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index cfebe852a9..79b881f687 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -1903,6 +1903,9 @@ table.floating_recipient {
     table-layout: fixed;
     border-collapse: separate;
     width: 100%;
+
+    /* Needs body background because the child row becomes transparent when faded */
+    background: #f4f5f4;
 }
 
 #bottom_whitespace {