fix(webui): 滚动边缘淡出按容器高度封顶,弹层不再淡(「渐变过猛」)

用户(2026-09-14):「你有的地方渐变用的过猛了,比如收件人候选那里」。

上一轮加的「边缘淡出」写的是上下各固定 12px —— 那是拿**长列表**的内边距
(10px)当尺子量的,可它作用在**所有** `overflow-y-auto` 上。
实测收件人候选菜单整块只有 58px 高(提示行 22px + 一条候选 34px),
上下各淡 12px 共 24px ⇒ 小半个菜单是渐变的,那条唯一的候选底部被洗白。

根因不是「12px 太大」,而是**固定像素用在了高度不固定的东西上**。所以:

1. `.overflow-y-auto` 的淡出宽度改成按可见高度封顶 `min(12px, 10%)`;
2. 弹层(`.overflow-y-auto.glass-control`)**不淡**:它是圆角+边框的独立
   表面,内容被边框截住已经「有交代」,而它高度小到淡出只剩负作用。

实测(Chromium 渲染后读像素,不是读声明的字面):
  60px 容器:新规则淡出 6px(10.0%),旧规则 12px(20.0%)
  700px 容器:新规则淡出 12px(1.7%)—— 高列表观感不变
  真实候选菜单:`getComputedStyle(...).maskImage` 从 12px 渐变变为 `none`

判据:narrow-layout 新增 4 条,钉的是**结构**而不是那个数字 ——
淡出宽度必须带上限、两个上限都必须 > 0、弹层必须豁免、两套前缀都要在。
(第一版只取了 `min(` 里的 px 就断言 > 0,把 10% 改成 0% 时照样绿,
被变异测试抓到后重写。)
This commit is contained in:
2026-09-14 15:44:08 +08:00
parent 71a3c35610
commit 00c4df4e98
3 changed files with 65 additions and 5 deletions

View File

@ -58,7 +58,7 @@ for (const must of ['配对/解析', 'allow-list', '变异验证', '剥掉注释
const SUITE = [
['test/markdown-xss.test.mjs', [], 9],
['test/narrow-layout.test.mjs', [], 54],
['test/narrow-layout.test.mjs', [], 58],
['test/nav-merge.test.mjs', [], 8],
['test/theme.test.mjs', [], 30],
['test/background.test.mjs', [], 42],