diff --git a/docs/en/guide/extending-default-theme.md b/docs/en/guide/extending-default-theme.md
index 63bf3365..307e0db4 100644
--- a/docs/en/guide/extending-default-theme.md
+++ b/docs/en/guide/extending-default-theme.md
@@ -75,7 +75,7 @@ For example, a frosted-glass navbar:
 The same treatment carries over to the local nav: `--vp-local-nav-bg-color` follows the navbar surface color by default, and where the two bars meet they share a single blurred surface, so the glass stays continuous across them.
 
 ::: warning
-`backdrop-filter` has a measurable scroll performance cost, especially on large or high-DPI screens. When using a translucent bar, also check text contrast over your page content.
+`backdrop-filter` has a measurable scroll performance cost, especially on large or high-DPI screens. When using a translucent bar, also check text contrast over your page content. Safari 17 and earlier don't apply variable-driven backdrop filters, so they show the translucent color without the blur.
 :::
 
 When the nav items don't fit the available width, they move into the `⋯` menu at the end of the navbar instead of being clipped, starting with the social links, the appearance switch and the locale switcher, followed by the nav items right-to-left. Its button label can be localized with [`extraMenuLabel`](../reference/default-theme-config#extramenulabel).
diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
index 0b644cdc..254aff13 100644
--- a/src/client/theme-default/components/VPLocalNav.vue
+++ b/src/client/theme-default/components/VPLocalNav.vue
@@ -87,7 +87,6 @@ const isScrolled = computed(() => y.value >= navHeight.value)
   z-index: -1;
   background-color: var(--vp-local-nav-bg-color);
   backdrop-filter: var(--vp-nav-backdrop-filter);
-  -webkit-backdrop-filter: var(--vp-nav-backdrop-filter);
   transition: background-color 0.25s;
 }
 
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 24a0f4c9..35b404cb 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -106,7 +106,6 @@ const overflow = provideNavOverflow({
   z-index: -1;
   background-color: var(--vp-nav-bg-color);
   backdrop-filter: var(--vp-nav-backdrop-filter);
-  -webkit-backdrop-filter: var(--vp-nav-backdrop-filter);
   transition: background-color 0.25s;
 }
 
@@ -123,7 +122,6 @@ const overflow = provideNavOverflow({
   .VPNavBar.home.top::before {
     background-color: var(--vp-nav-home-bg-color);
     backdrop-filter: none;
-    -webkit-backdrop-filter: none;
   }
 
   .VPNavBar.has-sidebar {
@@ -150,7 +148,6 @@ const overflow = provideNavOverflow({
   .VPNavBar.has-local-nav::before {
     background-color: transparent;
     backdrop-filter: none;
-    -webkit-backdrop-filter: none;
   }
 }