diff --git a/src/components/App.tsx b/src/components/App.tsx
index 16d0832c..99be4b0d 100644
--- a/src/components/App.tsx
+++ b/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) {
diff --git a/src/css/styles.scss b/src/css/styles.scss
index bdd2e315..826540d0 100644
--- a/src/css/styles.scss
+++ b/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 {
diff --git a/src/css/theme.scss b/src/css/theme.scss
index 4e7af4b9..643f9346 100644
--- a/src/css/theme.scss
+++ b/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),
diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts
index 2ee853d9..eac3d3c5 100644
--- a/src/renderer/renderScene.ts
+++ b/src/renderer/renderScene.ts
@@ -369,7 +369,7 @@ export const _renderScene = ({
       return { atLeastOneVisibleElement: false };
     }
     const {
-      renderScrollbars = true,
+      renderScrollbars = false,
       renderSelection = true,
       renderGrid = true,
       isExporting,
diff --git a/src/scene/scrollbars.ts b/src/scene/scrollbars.ts
index c36acde0..76a04d60 100644
--- a/src/scene/scrollbars.ts
+++ b/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;