From e8ba29f835c702a34ee89f969e108e7ece848d56 Mon Sep 17 00:00:00 2001
From: Kay Faraday <iexoo7ahth8s@freak.university>
Date: Sat, 2 Jul 2022 20:51:00 +0000
Subject: [PATCH] Revert "use <img> instead of <div> for avatars"

This reverts commit a34b7d3b5e32b6ca7afef343558f4678583a9cda.
---
 app/javascript/flavours/glitch/components/avatar.js       | 8 ++++----
 .../flavours/glitch/components/avatar_composite.js        | 6 +++---
 app/javascript/mastodon/components/avatar.js              | 8 ++++----
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/avatar.js b/app/javascript/flavours/glitch/components/avatar.js
index e3a838523..c5e9072c4 100644
--- a/app/javascript/flavours/glitch/components/avatar.js
+++ b/app/javascript/flavours/glitch/components/avatar.js
@@ -57,14 +57,14 @@ export default class Avatar extends React.PureComponent {
       backgroundSize: `${size}px ${size}px`,
     };
 
-    let imageSrc = staticSrc;
     if (hovering || animate) {
-      imageSrc = src;
+      style.backgroundImage = `url(${src})`;
+    } else {
+      style.backgroundImage = `url(${staticSrc})`;
     }
 
     return (
-      <img
-        src={imageSrc}
+      <div
         className={computedClass}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
diff --git a/app/javascript/flavours/glitch/components/avatar_composite.js b/app/javascript/flavours/glitch/components/avatar_composite.js
index 3c2a5a22d..e30dfe68a 100644
--- a/app/javascript/flavours/glitch/components/avatar_composite.js
+++ b/app/javascript/flavours/glitch/components/avatar_composite.js
@@ -67,8 +67,6 @@ export default class AvatarComposite extends React.PureComponent {
       }
     }
 
-    const imageSrc = account.get(animate ? 'avatar' : 'avatar_static');
-
     const style = {
       left: left,
       top: top,
@@ -76,6 +74,8 @@ export default class AvatarComposite extends React.PureComponent {
       bottom: bottom,
       width: `${width}%`,
       height: `${height}%`,
+      backgroundSize: 'cover',
+      backgroundImage: `url(${account.get(animate ? 'avatar' : 'avatar_static')})`,
     };
 
     return (
@@ -86,7 +86,7 @@ export default class AvatarComposite extends React.PureComponent {
         title={`@${account.get('acct')}`}
         key={account.get('id')}
       >
-        <img src={imageSrc} style={style} data-avatar-of={`@${account.get('acct')}`} />
+        <div style={style} data-avatar-of={`@${account.get('acct')}`} />
       </a>
     );
   }
diff --git a/app/javascript/mastodon/components/avatar.js b/app/javascript/mastodon/components/avatar.js
index aa8b96895..570505833 100644
--- a/app/javascript/mastodon/components/avatar.js
+++ b/app/javascript/mastodon/components/avatar.js
@@ -53,14 +53,14 @@ export default class Avatar extends React.PureComponent {
       backgroundSize: `${size}px ${size}px`,
     };
 
-    let imageSrc = staticSrc;
     if (hovering || animate) {
-      imageSrc = src;
+      style.backgroundImage = `url(${src})`;
+    } else {
+      style.backgroundImage = `url(${staticSrc})`;
     }
 
     return (
-      <img
-        src={imageSrc}
+      <div
         className={className}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}