fix: scrollbars renders but disable (#6706)

src/components/App.tsx

@@ -1720,7 +1720,7 @@ class App extends React.Component<AppProps, AppState> {
           theme: this.state.theme,
           imageCache: this.imageCache,
           isExporting: false,
-          renderScrollbars: !this.device.isMobile,
+          renderScrollbars: false,
         },
         callback: ({ atLeastOneVisibleElement, scrollBars }) => {
           if (scrollBars) {

src/css/styles.scss

@@ -9,6 +9,11 @@
   --zIndex-modal: 1000;
   --zIndex-popup: 1001;
   --zIndex-toast: 999999;
+
+  --sab: env(safe-area-inset-bottom);
+  --sal: env(safe-area-inset-left);
+  --sar: env(safe-area-inset-right);
+  --sat: env(safe-area-inset-top);
 }
 
 .excalidraw {

src/css/theme.scss

@@ -27,10 +27,6 @@
   --popup-secondary-bg-color: #{$oc-gray-1};
   --popup-text-color: #{$oc-black};
   --popup-text-inverted-color: #{$oc-white};
-  --sab: env(safe-area-inset-bottom);
-  --sal: env(safe-area-inset-left);
-  --sar: env(safe-area-inset-right);
-  --sat: env(safe-area-inset-top);
   --select-highlight-color: #{$oc-blue-5};
   --shadow-island: 0px 7px 14px rgba(0, 0, 0, 0.05),
     0px 0px 3.12708px rgba(0, 0, 0, 0.0798),

src/renderer/renderScene.ts

@@ -369,7 +369,7 @@ export const _renderScene = ({
       return { atLeastOneVisibleElement: false };
     }
     const {
-      renderScrollbars = true,
+      renderScrollbars = false,
       renderSelection = true,
       renderGrid = true,
       isExporting,

src/scene/scrollbars.ts

@@ -41,10 +41,10 @@ export const getScrollBars = (
   const viewportHeightDiff = viewportHeight - viewportHeightWithZoom;
 
   const safeArea = {
-    top: parseInt(getGlobalCSSVariable("sat")),
-    bottom: parseInt(getGlobalCSSVariable("sab")),
-    left: parseInt(getGlobalCSSVariable("sal")),
-    right: parseInt(getGlobalCSSVariable("sar")),
+    top: parseInt(getGlobalCSSVariable("sat")) || 0,
+    bottom: parseInt(getGlobalCSSVariable("sab")) || 0,
+    left: parseInt(getGlobalCSSVariable("sal")) || 0,
+    right: parseInt(getGlobalCSSVariable("sar")) || 0,
   };
 
   const isRTL = getLanguage().rtl;