Remove transforms so fixed positioning actually works. Chrome: 20574 wontfix lel

client/src/styles/partials/generic/modals.scss

@@ -1,5 +1,5 @@
 .bd-backdrop {
-    position: absolute;
+    position: fixed;
     right: 0px;
     left: 0px;
     top: 0px;

client/src/styles/partials/sidebarview/content.scss

@@ -36,7 +36,9 @@
     > div:not(.active) {
         opacity: 0;
         position: absolute;
-        width: 100%;
+        left: 310px;
+        right: 0;
+        // width: 100%;
         height: 100%;
         pointer-events: none;
     }

client/src/styles/partials/sidebarview/main.scss

@@ -39,9 +39,15 @@
         backface-visibility: hidden;
     }
 
+    &.bd-stop {
+        .bd-content-region {
+            transform: none;
+        }
+    }
+
     &.active {
         .bd-content-region {
-            animation: bd-slidein .6s forwards;
+            animation: bd-slidein .6s;
         }
     }
 }

client/src/ui/components/BdSettings.vue

@@ -10,7 +10,7 @@
 
 <template>
     <div class="bd-settings" :class="{active: active}" @keyup="close">
-        <SidebarView :contentVisible="this.activeIndex >= 0" :animating="this.animating">
+        <SidebarView :contentVisible="this.activeIndex >= 0" :animating="this.animating" :class="{'bd-stop': !first}">
             <Sidebar slot="sidebar">
                 <div class="bd-settings-x" @click="close">
                     <MiClose size="17"/>
@@ -101,11 +101,8 @@
                 this.lastActiveIndex = this.activeIndex;
                 this.activeIndex = id;
 
-                if (this.first) {
-                    this.first = false;
-                }
-
                 setTimeout(() => {
+                    this.first = false;
                     this.animating = false;
                     this.lastActiveIndex = -1;
                 }, 400);