header-avatar: Remove background and border around loaded image.

web/src/ui_init.js

@@ -196,6 +196,10 @@ function initialize_navbar() {
     });
 
     $("#header-container").html(rendered_navbar);
+    // Track when the image is loaded to updated CSS properties.
+    $("#header-container img.header-button-avatar-image").on("load", (e) => {
+        e.currentTarget.classList.add("avatar-loaded");
+    });
 }
 
 function initialize_compose_box() {

web/styles/zulip.css

@@ -2442,6 +2442,11 @@ body:not(.spectator-view) {
                avatar in the navbar from being lower by a pixel. */
             display: block;
         }
+
+        &:has(.avatar-loaded) {
+            background-color: transparent;
+            border-color: transparent;
+        }
     }
 }