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:
@ -1365,20 +1365,39 @@ html[data-bg='on'] .glass-card:hover {
|
||||
* 只作用在**纵向**滚动容器(`.overflow-y-auto`):周视图那种**横向**滚动
|
||||
* 有自己的横向滚动条,加纵向遮罩会跟它打架(用户刚提过手势冲突那件事)。
|
||||
* 上下各 12px 与列表内边距(10px)接近,静止时几乎看不出,滚动时才起作用。
|
||||
*
|
||||
* ★ 2026-09-14 追加(用户:「你有的地方渐变用的过猛了,比如收件人候选那里」):
|
||||
* 那个「12px」是拿**长列表**的内边距(10px)当尺子量的,可它作用在**所有**
|
||||
* `overflow-y-auto` 上。收件人候选菜单整块才 58px 高(提示行 22px + 一条候选 34px),
|
||||
* 上下各淡 12px 共 24px —— 小半个菜单是渐变的,那条唯一的候选底部直接被洗白。
|
||||
* 「过猛」的根因不是 12px 太大,而是**固定像素用在了一个高度不固定的东西上**。
|
||||
* 所以改成按容器可见高度封顶:min(12px, 10%)。
|
||||
* - 高列表(≥120px)拿到的还是 12px,原观感不变;
|
||||
* - 矮容器按比例收敛(58px 的菜单 → 5.8px)。
|
||||
*/
|
||||
.overflow-y-auto {
|
||||
-webkit-mask-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0,
|
||||
#000 12px,
|
||||
#000 calc(100% - 12px),
|
||||
#000 min(12px, 10%),
|
||||
#000 calc(100% - min(12px, 10%)),
|
||||
transparent 100%
|
||||
);
|
||||
mask-image: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0,
|
||||
#000 12px,
|
||||
#000 calc(100% - 12px),
|
||||
#000 min(12px, 10%),
|
||||
#000 calc(100% - min(12px, 10%)),
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
* 弹层(控件档的滚动区)**不淡**:它是圆角 + 边框的独立表面,内容被边框截住
|
||||
* 已经「有交代」了 —— 那个淡出本来是为了不让长列表的卡片显得被硬切断的。
|
||||
* 而弹层高度本来就小,淡出只会把首尾项洗白(实测:候选菜单 58px,淡掉 24px)。
|
||||
*/
|
||||
.overflow-y-auto.glass-control {
|
||||
-webkit-mask-image: none;
|
||||
mask-image: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user