修复 MacBook Safari 布局崩溃:100vw/dvh 和 -webkit-backdrop-filter

Safari 将滚动条宽度计入 100vw 导致内容被裁切,100vh 被地址栏撑破。
- root 容器: 100vw → width:100% + max-width:100vw
- 详情面板/扫描终端: 100vh → 叠加 100dvh 兼容 Safari 视口
- 详情面板: 添加 -webkit-backdrop-filter 前缀
@
This commit is contained in:
2569718930@qq.com
2026-05-21 17:27:45 +08:00
parent 89a82b5fb5
commit ecec3fc087
3 changed files with 6 additions and 1 deletions
@@ -62,7 +62,9 @@
color: var(--text-primary);
overflow: hidden;
height: 100vh;
width: 100vw;
height: 100dvh;
width: 100%;
max-width: 100vw;
background-image:
radial-gradient(
circle at 18% 18%,
@@ -5,6 +5,7 @@
right: 0;
width: var(--panel-width);
height: 100vh;
height: 100dvh;
z-index: 950;
background: linear-gradient(
180deg,
@@ -12,6 +13,7 @@
rgba(15, 23, 42, 0.95) 100%
);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-left: 1px solid var(--border-glass);
box-shadow: -10px 0 60px rgba(0, 0, 0, 0.5);
transform: translateX(100%);
@@ -527,6 +527,7 @@
gap: 14px;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
height: auto;
margin-top: 0;
padding: 16px;