diff --git a/res/css/views/elements/_MessageEditor.scss b/res/css/views/elements/_MessageEditor.scss
index 15f60f5922..7cf96afb11 100644
--- a/res/css/views/elements/_MessageEditor.scss
+++ b/res/css/views/elements/_MessageEditor.scss
@@ -34,32 +34,11 @@ limitations under the License.
         max-height: 200px;
         overflow-x: auto;
 
-        span {
-            display: inline-block;
-            padding: 0 5px;
-            border-radius: 4px;
-            color: white;
-        }
-
-        span.room-pill {
-            color: $accent-fg-color;
-            background-color: $rte-room-pill-color;
-        }
-
-        span.user-pill {
-            color: $primary-fg-color;
-            background-color: $other-user-pill-bg-color;
-        }
-
-        span.user-pill, span.room-pill {
-            height: 20px;
-            line-height: 20px;
-            border-radius: 16px;
-            display: inline-block;
+        span.mx_UserPill, span.mx_RoomPill {
             padding-left: 21px;
-            padding-right: 5px;
             position: relative;
 
+            // avatar psuedo element
             &::before {
                 position: absolute;
                 left: 2px;
diff --git a/src/editor/parts.js b/src/editor/parts.js
index 62127ca54c..59b62a21d5 100644
--- a/src/editor/parts.js
+++ b/src/editor/parts.js
@@ -154,7 +154,7 @@ class PillPart extends BasePart {
 
     toDOMNode() {
         const container = document.createElement("span");
-        container.className = this.type;
+        container.className = this.className;
         container.appendChild(document.createTextNode(this.text));
         this.setAvatar(container);
         return container;
@@ -163,12 +163,10 @@ class PillPart extends BasePart {
     updateDOMNode(node) {
         const textNode = node.childNodes[0];
         if (textNode.textContent !== this.text) {
-            // console.log("changing pill text from", textNode.textContent, "to", this.text);
             textNode.textContent = this.text;
         }
-        if (node.className !== this.type) {
-            // console.log("turning", node.className, "into", this.type);
-            node.className = this.type;
+        if (node.className !== this.className) {
+            node.className = this.className;
         }
         this.setAvatar(node);
     }
@@ -180,6 +178,20 @@ class PillPart extends BasePart {
                node.childNodes[0].nodeType === Node.TEXT_NODE;
     }
 
+    // helper method for subclasses
+    _setAvatarVars(node, avatarUrl, initialLetter) {
+        const avatarBackground = `url('${avatarUrl}')`;
+        const avatarLetter = `'${initialLetter}'`;
+        // check if the value is changing,
+        // otherwise the avatars flicker on every keystroke while updating.
+        if (node.style.getPropertyValue("--avatar-background") !== avatarBackground) {
+            node.style.setProperty("--avatar-background", avatarBackground);
+        }
+        if (node.style.getPropertyValue("--avatar-letter") !== avatarLetter) {
+            node.style.setProperty("--avatar-letter", avatarLetter);
+        }
+    }
+
     get canEdit() {
         return false;
     }
@@ -245,13 +257,16 @@ export class RoomPillPart extends PillPart {
             initialLetter = Avatar.getInitialLetter(this._room.name);
             avatarUrl = `../../${Avatar.defaultAvatarUrlForString(this._room.roomId)}`;
         }
-        node.style.setProperty("--avatar-background", `url('${avatarUrl}')`);
-        node.style.setProperty("--avatar-letter", `'${initialLetter}'`);
+        this._setAvatarVars(node, avatarUrl, initialLetter);
     }
 
     get type() {
         return "room-pill";
     }
+
+    get className() {
+        return "mx_RoomPill mx_Pill";
+    }
 }
 
 export class UserPillPart extends PillPart {
@@ -273,13 +288,16 @@ export class UserPillPart extends PillPart {
             avatarUrl = `../../${avatarUrl}`;
             initialLetter = Avatar.getInitialLetter(name);
         }
-        node.style.setProperty("--avatar-background", `url('${avatarUrl}')`);
-        node.style.setProperty("--avatar-letter", `'${initialLetter}'`);
+        this._setAvatarVars(node, avatarUrl, initialLetter);
     }
 
     get type() {
         return "user-pill";
     }
+
+    get className() {
+        return "mx_UserPill mx_Pill";
+    }
 }