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

* chore: inset 替换为 top right bottom left * fix: 修复 rtlInset 方法无效问题 * docs: update changelog
2025-03-31 14:20:53 +08:00 · 2024-12-19 17:25:53 +08:00 · 2024-12-19 17:25:53 +08:00 · 36a311cf49
commit 36a311cf49
parent c58f97eabe
9 changed files with 110 additions and 20 deletions
--- 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`
--- 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,6 +701,43 @@ 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,
@ -708,14 +745,23 @@ const Scrollbar = defineComponent({
        '--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
      }
    })
--- 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('>', [
--- 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}`
 }
--- 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', [
--- 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;
--- 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;
--- 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;
--- 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,