diff --git a/apps/renderer/src/modules/app-layout/feed-column/float-bar.mobile.tsx b/apps/renderer/src/modules/app-layout/feed-column/float-bar.mobile.tsx
index c4dcb7747..11ff0ff20 100644
--- a/apps/renderer/src/modules/app-layout/feed-column/float-bar.mobile.tsx
+++ b/apps/renderer/src/modules/app-layout/feed-column/float-bar.mobile.tsx
@@ -60,8 +60,10 @@ export const MobileFloatBar = ({
 
   useEffect(() => {
     if (isScrollDown) {
+      const computedStyle = getComputedStyle(document.documentElement)
+      const safeAreaBottom = computedStyle.getPropertyValue("--sab")
       animateController.start({
-        translateY: "calc(100% + 40px + env(safe-area-inset-bottom))",
+        translateY: `calc(100% + 40px + ${safeAreaBottom})`,
         transition: { type: "tween", duration: 0.1 },
       })
     } else {
diff --git a/apps/renderer/src/styles/base.css b/apps/renderer/src/styles/base.css
index b889e5d9a..690386ac5 100644
--- a/apps/renderer/src/styles/base.css
+++ b/apps/renderer/src/styles/base.css
@@ -2,7 +2,12 @@ html,
 #shadow-html {
   --fo-font-family: "SN Pro", system-ui, sans-serif;
 }
-
+:root {
+  --sat: env(safe-area-inset-top);
+  --sar: env(safe-area-inset-right);
+  --sab: env(safe-area-inset-bottom);
+  --sal: env(safe-area-inset-left);
+}
 * {
   -webkit-tap-highlight-color: transparent;
 }