Fix background-image: url(null) for backdrop filter

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

res/themes/light/css/_mods.scss

@@ -6,7 +6,7 @@
 
 @supports (backdrop-filter: none) {
     .mx_LeftPanel {
-        background-image: var(--avatar-url);
+        background-image: var(--avatar-url, unset);
         background-repeat: no-repeat;
         background-size: cover;
         background-position: left top;

src/components/structures/LeftPanel.tsx

@@ -119,8 +119,12 @@ export default class LeftPanel extends React.Component<IProps, IState> {
         if (settingBgMxc) {
             avatarUrl = MatrixClientPeg.get().mxcUrlToHttp(settingBgMxc, avatarSize, avatarSize);
         }
+
         const avatarUrlProp = `url(${avatarUrl})`;
-        if (document.body.style.getPropertyValue("--avatar-url") !== avatarUrlProp) {
+        const existingValue = document.body.style.getPropertyValue("--avatar-url");
+        if (!avatarUrl && existingValue) {
+            document.body.style.removeProperty("--avatar-url");
+        } else if (avatarUrl && existingValue !== avatarUrlProp) {
             document.body.style.setProperty("--avatar-url", avatarUrlProp);
         }
     };