fix(theme): overflow clip is buggy on safari

brc-dd · brc-dd · commit 8ed6ea048cb4 · 2025-12-08T09:56:16.000+09:00
closes #5050 x-ref: 06f0e1a (#5039), 0ee7158 (#5027)
diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
@@ -47,7 +47,6 @@ watchEffect(() => {
   width: 100%;
   pointer-events: none;
   transition: background-color 0.5s;
-  overflow-x: clip;
 }
 
 @media (min-width: 960px) {
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
@@ -187,8 +187,6 @@ watchPostEffect(() => {
   justify-content: flex-end;
   align-items: center;
   height: var(--vp-nav-height);
-  margin-right: -100vw;
-  padding-right: 100vw;
   transition: background-color 0.5s;
 }
 
@@ -201,6 +199,11 @@ watchPostEffect(() => {
   .VPNavBar:not(.has-sidebar):not(.home.top) .content-body {
     background-color: transparent;
   }
+
+  .content-body {
+    margin-right: -100vw;
+    padding-right: 100vw;
+  }
 }
 
 @media (max-width: 767px) {

Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,6 @@ watchEffect(() => {`
`47`	`47`	`width: 100%;`
`48`	`48`	`pointer-events: none;`
`49`	`49`	`transition: background-color 0.5s;`
`50`		`- overflow-x: clip;`
`51`	`50`	`}`
`52`	`51`
`53`	`52`	`@media (min-width: 960px) {`
Original file line number	Diff line number	Diff line change
`@@ -187,8 +187,6 @@ watchPostEffect(() => {`
`187`	`187`	`justify-content: flex-end;`
`188`	`188`	`align-items: center;`
`189`	`189`	`height: var(--vp-nav-height);`
`190`		`- margin-right: -100vw;`
`191`		`- padding-right: 100vw;`
`192`	`190`	`transition: background-color 0.5s;`
`193`	`191`	`}`
`194`	`192`
`@@ -201,6 +199,11 @@ watchPostEffect(() => {`
`201`	`199`	`.VPNavBar:not(.has-sidebar):not(.home.top) .content-body {`
`202`	`200`	`background-color: transparent;`
`203`	`201`	`}`
	`202`	`+`
	`203`	`+ .content-body {`
	`204`	`+ margin-right: -100vw;`
	`205`	`+ padding-right: 100vw;`
	`206`	`+ }`
`204`	`207`	`}`
`205`	`208`
`206`	`209`	`@media (max-width: 767px) {`