perf: remove OverlayScrollbars

OverlayScrollbars killed the performance of pages with huge DOM manipulations, like library pages (where the scroller is virtual). It also attempted to track events from image objects, which slowed down the app even more.
jellyfin · Jan 26, 2023 · 100c516 · 100c516
1 parent bd9beb1
commit 100c516
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 43 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-overlayscrollbars-initialize>
+<html lang="en">
   <head>
     <style>
       @keyframes gradient {
@@ -94,7 +94,7 @@
     <script type="module" src="src/main.ts"></script>
     <title>Jellyfin Vue</title>
   </head>
-  <body data-overlayscrollbars-initialize>
+  <body>
     <div class="splashBackground">
       <div class="splashLogo"></div>
     </div>

diff --git a/frontend/package.json b/frontend/package.json
@@ -39,7 +39,6 @@
     "langs": "2.0.0",
     "lodash-es": "4.17.21",
     "mux.js": "6.1.0",
-    "overlayscrollbars": "2.0.1",
     "screenfull": "6.0.1",
     "shaka-player": "4.1.1",
     "swiper": "8.3.2",

diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -1,17 +1,14 @@
 * {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-  /**
-   * Remove native scrollbars: we're using OverlayScrollbars for that
-   * That also removes the need for scroll-behaviour: smooth
-   */
-  /* W3C standard scrollbars (Firefox-only for now) */
-  scrollbar-width: none;
 }
-/* Reproduce something similar on Chrome/Edge/Safari */
+
 *::-webkit-scrollbar {
-  display: none;
+  width: 5px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: #666;
 }
 
 /* Vuetify overrides */

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
@@ -10,7 +10,6 @@
  */
 
 import { createApp } from 'vue';
-import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';
 import Root from '@/App.vue';
 /* eslint-disable no-restricted-imports */
 import { createRemote, i18n, router, vuetify } from '@/plugins';
@@ -22,7 +21,6 @@ import { hideDirective } from '@/plugins/directives';
  */
 import '@/assets/styles/global.scss';
 import '@/assets/styles/transitions.scss';
-import 'overlayscrollbars/overlayscrollbars.css';
 
 /**
  * - VUE PLUGINS, STORE AND DIRECTIVE -
@@ -51,31 +49,8 @@ await router.isReady();
  * splash screen gets frozen an small (but noticeable) amount of time.
  */
 const appDOM = document.querySelector('#app') as HTMLDivElement;
-const bodyDOM = document.querySelector('body') as HTMLBodyElement;
 const splashDOM = document.querySelector('.splashBackground') as HTMLDivElement;
 
-OverlayScrollbars.plugin(ClickScrollPlugin);
-window.setTimeout(() => {
-  window.requestAnimationFrame(() => {
-    OverlayScrollbars(
-      {
-        target: bodyDOM
-      },
-      {
-        update: {
-          debounce: 0
-        },
-        scrollbars: {
-          autoHide: 'move',
-          autoHideDelay: 1000,
-          clickScroll: true,
-          dragScroll: true
-        }
-      }
-    );
-  });
-});
-
 /**
  * Once we reach this point, the bundle and the app will be completely loaded and mounted,
  * so we add a loadFinished class (defined in index.html) that fires the defined transition

diff --git a/package-lock.json b/package-lock.json