mirror of
https://gitcode.com/JianFeeeee/webui4frpc.git
synced 2026-09-19 16:38:31 +00:00
fix(web): 窄屏底部导航栏错位到顶部 — 顶栏 backdrop-filter 创建了包含块
.sb-nav 用 position:fixed;bottom:0 想贴视口底部,但父元素 .sidebar 带 backdrop-filter。backdrop-filter 与 transform/filter 同理,会为后代的 position:fixed 创建【包含块】—— 于是 bottom:0 变成相对顶栏下沿定位而不是 视口,tab bar 贴在顶栏正下方,看起来就是固定在屏幕顶部。 窄屏下关掉顶栏的 backdrop-filter,改用近实色底 color-mix(var(--w4f-card-solid) 92%, transparent);玻璃模糊保留在 .sb-nav 自身(元素自己的 backdrop-filter 不影响自己的定位)。 顺带 bump 到 0.1.2(version 包 / release.sh / build_installers.sh / rpm spec + changelog / README 安装示例文件名)。 验证:tsc --noEmit 通过、npm run build 通过;产物 CSS 中确认 720px 段的 .sidebar 已含 backdrop-filter:none;三节点部署后 /status 报告 0.1.2, 环正常(cycle 推进、pending=0、5 条转发 frpc 进程与 topology 归属一致)。
This commit is contained in:
@ -388,6 +388,15 @@ const currentLabel = computed(() => nav.value.find((n) => n.key === view.value)?
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--w4f-line);
|
||||
padding-top: max(10px, env(safe-area-inset-top));
|
||||
/* 关键:backdrop-filter 会为 position:fixed 后代创建【包含块】
|
||||
(与 transform/filter 同理)。若保留它,下面 .sb-nav 的
|
||||
bottom:0 就是相对这条顶栏定位而非视口,底部 tab bar 会贴在
|
||||
顶栏下沿、看起来固定在屏幕顶部。因此窄屏必须关掉顶栏的玻璃
|
||||
模糊,改用接近实色的底,模糊效果留在 .sb-nav 自己身上
|
||||
(元素自身的 backdrop-filter 不影响它自己的定位)。 */
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
background: color-mix(in srgb, var(--w4f-card-solid) 92%, transparent);
|
||||
}
|
||||
.sb-brand {
|
||||
padding: 0;
|
||||
|
||||
Reference in New Issue
Block a user