diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index e80d5fd399..5115d21d56 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -82,7 +82,7 @@ function more() {
 
 <style lang="scss" module>
 .root {
-	--nav-bg-transparent: color-mix(in srgb, var(--navBg), transparent 50%);
+	--nav-bg-transparent: color(from var(--navBg) srgb r g b / 0.5);
 
 	display: flex;
 	flex-direction: column;
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 2b116909ba..05f5ff2565 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -111,7 +111,7 @@ function more(ev: MouseEvent) {
 .root {
 	--nav-width: 250px;
 	--nav-icon-only-width: 80px;
-	--nav-bg-transparent: color-mix(in srgb, var(--navBg), transparent 50%);
+	--nav-bg-transparent: color(from var(--navBg) srgb r g b / 0.5);
 
 	flex: 0 0 var(--nav-width);
 	width: var(--nav-width);