fix: 修改 inset 属性，因为在部分浏览器中有兼容性问题 (#6605)

* chore: inset 替换为 top right bottom left * fix: 修复 rtlInset 方法无效问题 * docs: update changelog
tusen-ai · Dec 19, 2024 · 36a311c · 36a311c
1 parent c58f97e
commit 36a311c
Show file tree

Hide file tree

Showing 9 changed files with 110 additions and 20 deletions.
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Fixes
+
+- 修复 `n-scrollbar`、`n-float-button`、`n-float-button-group`、`n-popover` 组件中的 `inset` 属性在部分浏览器中有兼容性问题，close [#6604](https://github.com/tusen-ai/naive-ui/issues/6604)，close [#6602](https://github.com/tusen-ai/naive-ui/issues/6602)
+
 ## 2.40.3
 
 `2024-12-02`

diff --git a/src/_internal/scrollbar/src/Scrollbar.tsx b/src/_internal/scrollbar/src/Scrollbar.tsx
@@ -6,7 +6,7 @@ import type {
 } from '../../../_utils'
 import type { ScrollbarTheme } from '../styles'
 import { off, on } from 'evtd'
-import { depx, getPreciseEventTarget } from 'seemly'
+import { depx, getPadding, getPreciseEventTarget } from 'seemly'
 import { useIsIos } from 'vooks'
 import {
   computed,
@@ -701,21 +701,67 @@ const Scrollbar = defineComponent({
           railColor
         }
       } = themeRef.value
+
+      const {
+        top: railTopHorizontalTop,
+        right: railRightHorizontalTop,
+        bottom: railBottomHorizontalTop,
+        left: railLeftHorizontalTop
+      } = getPadding(railInsetHorizontalTop)
+
+      const {
+        top: railTopHorizontalBottom,
+        right: railRightHorizontalBottom,
+        bottom: railBottomHorizontalBottom,
+        left: railLeftHorizontalBottom
+      } = getPadding(railInsetHorizontalBottom)
+
+      const {
+        top: railTopVerticalRight,
+        right: railRightVerticalRight,
+        bottom: railBottomVerticalRight,
+        left: railLeftVerticalRight
+      } = getPadding(
+        rtlEnabledRef?.value
+          ? rtlInset(railInsetVerticalRight)
+          : railInsetVerticalRight
+      )
+
+      const {
+        top: railTopVerticalLeft,
+        right: railRightVerticalLeft,
+        bottom: railBottomVerticalLeft,
+        left: railLeftVerticalLeft
+      } = getPadding(
+        rtlEnabledRef?.value
+          ? rtlInset(railInsetVerticalLeft)
+          : railInsetVerticalLeft
+      )
+
       return {
         '--n-scrollbar-bezier': cubicBezierEaseInOut,
         '--n-scrollbar-color': color,
         '--n-scrollbar-color-hover': colorHover,
         '--n-scrollbar-border-radius': borderRadius,
         '--n-scrollbar-width': width,
         '--n-scrollbar-height': height,
-        '--n-scrollbar-rail-inset-horizontal-top': railInsetHorizontalTop,
-        '--n-scrollbar-rail-inset-horizontal-bottom': railInsetHorizontalBottom,
-        '--n-scrollbar-rail-inset-vertical-right': rtlEnabledRef?.value
-          ? rtlInset(railInsetVerticalRight)
-          : railInsetVerticalRight,
-        '--n-scrollbar-rail-inset-vertical-left': rtlEnabledRef?.value
-          ? rtlInset(railInsetVerticalLeft)
-          : railInsetVerticalLeft,
+        '--n-scrollbar-rail-top-horizontal-top': railTopHorizontalTop,
+        '--n-scrollbar-rail-right-horizontal-top': railRightHorizontalTop,
+        '--n-scrollbar-rail-bottom-horizontal-top': railBottomHorizontalTop,
+        '--n-scrollbar-rail-left-horizontal-top': railLeftHorizontalTop,
+        '--n-scrollbar-rail-top-horizontal-bottom': railTopHorizontalBottom,
+        '--n-scrollbar-rail-right-horizontal-bottom': railRightHorizontalBottom,
+        '--n-scrollbar-rail-bottom-horizontal-bottom':
+          railBottomHorizontalBottom,
+        '--n-scrollbar-rail-left-horizontal-bottom': railLeftHorizontalBottom,
+        '--n-scrollbar-rail-top-vertical-right': railTopVerticalRight,
+        '--n-scrollbar-rail-right-vertical-right': railRightVerticalRight,
+        '--n-scrollbar-rail-bottom-vertical-right': railBottomVerticalRight,
+        '--n-scrollbar-rail-left-vertical-right': railLeftVerticalRight,
+        '--n-scrollbar-rail-top-vertical-left': railTopVerticalLeft,
+        '--n-scrollbar-rail-right-vertical-left': railRightVerticalLeft,
+        '--n-scrollbar-rail-bottom-vertical-left': railBottomVerticalLeft,
+        '--n-scrollbar-rail-left-vertical-left': railLeftVerticalLeft,
         '--n-scrollbar-rail-color': railColor
       }
     })

diff --git a/src/_internal/scrollbar/src/styles/index.cssr.ts b/src/_internal/scrollbar/src/styles/index.cssr.ts
@@ -61,10 +61,16 @@ export default cB('scrollbar', `
         ])
       ]),
       cM('horizontal--top', `
-        inset: var(--n-scrollbar-rail-inset-horizontal-top);  
+        top: var(--n-scrollbar-rail-top-horizontal-top);  
+        right: var(--n-scrollbar-rail-right-horizontal-top);  
+        bottom: var(--n-scrollbar-rail-bottom-horizontal-top);  
+        left: var(--n-scrollbar-rail-left-horizontal-top);  
       `),
       cM('horizontal--bottom', `
-        inset: var(--n-scrollbar-rail-inset-horizontal-bottom);  
+        top: var(--n-scrollbar-rail-top-horizontal-bottom);  
+        right: var(--n-scrollbar-rail-right-horizontal-bottom);  
+        bottom: var(--n-scrollbar-rail-bottom-horizontal-bottom);  
+        left: var(--n-scrollbar-rail-left-horizontal-bottom);  
       `),
       cM('vertical', `
         width: var(--n-scrollbar-width);
@@ -78,10 +84,16 @@ export default cB('scrollbar', `
         ])
       ]),
       cM('vertical--left', `
-        inset: var(--n-scrollbar-rail-inset-vertical-left);  
+        top: var(--n-scrollbar-rail-top-vertical-left);  
+        right: var(--n-scrollbar-rail-right-vertical-left);  
+        bottom: var(--n-scrollbar-rail-bottom-vertical-left);  
+        left: var(--n-scrollbar-rail-left-vertical-left);  
       `),
       cM('vertical--right', `
-        inset: var(--n-scrollbar-rail-inset-vertical-right);  
+        top: var(--n-scrollbar-rail-top-vertical-right);  
+        right: var(--n-scrollbar-rail-right-vertical-right);  
+        bottom: var(--n-scrollbar-rail-bottom-vertical-right);  
+        left: var(--n-scrollbar-rail-left-vertical-right);  
       `),
       cM('disabled', [
         c('>', [

diff --git a/src/_utils/css/rtl-inset.ts b/src/_utils/css/rtl-inset.ts
@@ -2,5 +2,5 @@ import { getPadding } from 'seemly'
 
 export function rtlInset(inset: string): string {
   const { left, right, top, bottom } = getPadding(inset)
-  return `${top} ${right} ${bottom} ${left}`
+  return `${top} ${left} ${bottom} ${right}`
 }
diff --git a/src/float-button-group/src/styles/index.cssr.ts b/src/float-button-group/src/styles/index.cssr.ts
@@ -37,7 +37,13 @@ export default cB('float-button-group', [
         border-bottom-left-radius: 4px;
         border-bottom-right-radius: 4px;
       `),
-      cE('fill', 'inset: 4px; border-radius: var(--n-border-radius-square);')
+      cE('fill', `
+        top: 4px;
+        right: 4px;
+        bottom: 4px;
+        left: 4px;
+        border-radius: var(--n-border-radius-square);  
+      `)
     ])
   ]),
   cM('circle-shape', [

diff --git a/src/float-button/src/styles/index.cssr.ts b/src/float-button/src/styles/index.cssr.ts
@@ -34,7 +34,10 @@ export default cB('float-button', `
   `),
   cE('fill', `
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0
+    left: 0;
     transition: background-color .3s var(--n-bezier);
     border-radius: inherit;
   `),
@@ -93,7 +96,10 @@ export default cB('float-button', `
     opacity: 0;
     transform: scale(0.75);
     position: absolute;
-    inset: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     display: flex;
     align-items: center;
     justify-content: center;

diff --git a/src/loading-bar/demos/enUS/container.demo.vue b/src/loading-bar/demos/enUS/container.demo.vue
@@ -49,7 +49,10 @@ export default defineComponent({
       ref="loadingBarTargetRef"
       style="
         position: absolute;
-        inset: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
         border-radius: var(--n-border-radius);
         overflow: hidden;
         pointer-events: none;

diff --git a/src/loading-bar/demos/zhCN/container.demo.vue b/src/loading-bar/demos/zhCN/container.demo.vue
@@ -41,7 +41,10 @@ export default defineComponent({
       ref="loadingBarTargetRef"
       style="
         position: absolute;
-        inset: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
         border-radius: var(--n-border-radius);
         overflow: hidden;
         pointer-events: none;

diff --git a/src/popover/src/Popover.tsx b/src/popover/src/Popover.tsx
@@ -583,7 +583,15 @@ export default defineComponent({
             return [
               this.internalTrapFocus && mergedShow
                 ? withDirectives(
-                  <div style={{ position: 'fixed', inset: 0 }} />,
+                  <div
+                    style={{
+                      position: 'fixed',
+                      top: 0,
+                      right: 0,
+                      bottom: 0,
+                      left: 0
+                    }}
+                  />,
                   [
                     [
                       zindexable,