From f9c9558f71e2be37be41d5ff0e6544dc282c4430 Mon Sep 17 00:00:00 2001 From: judy Date: Mon, 29 Jun 2026 11:22:47 +0800 Subject: [PATCH] =?UTF-8?q?fix(web/style):=20=E7=9C=9F=E6=AD=A3=E6=B6=88?= =?UTF-8?q?=E9=99=A4=20post-list=20hover=20=E6=8A=96=E5=8A=A8=20=E2=80=94?= =?UTF-8?q?=20=E5=A7=8B=E7=BB=88=E6=8C=82=E8=BD=BD=E6=BB=9A=E5=8A=A8?= =?UTF-8?q?=E6=9D=A1+=E9=80=8F=E6=98=8E=20thumb?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PR #109 用 scrollbar-gutter: stable 想保留 gutter，但 CSS 规范规定 gutter 在 scrollbar-width: none 时是 no-op，所以那行修改实际上根本 没生效，hover 切到 auto 仍然会真占走 ~10px。Scott 反馈刷新后还在抖 就是这个原因。 正确做法：让 scrollbar 始终挂载且宽度固定，默认 thumb / track 全透明， hover 时把 thumb 上色。视觉上跟之前的 Slack-style hover-reveal 完全一样 （默认看不到、hover 出现），但布局宽度恒定，鼠标进出零 reflow。 - WebKit/Chromium/Safari：::-webkit-scrollbar 固定 width: 10px， ::-webkit-scrollbar-thumb 默认 transparent，hover 时上色。 - Firefox：scrollbar-width: thin + scrollbar-color: transparent transparent 默认，hover 时把 thumb 颜色切到 rgba(0,0,0,0.25)。 - 加 0.15s transition 让出现/消失更柔和。 SW 已经在 v2 = network-first，下次硬刷新一次直接生效。 --- CHANGELOG.md | 2 +- web/style.css | 55 ++++++++++++++++++++++++++++++--------------------- 2 files changed, 34 insertions(+), 23 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e628425..49991f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,7 +27,7 @@ auto-generated notes — but stable semver tags must pass. ## Unreleased - Thread view no longer flickers on every refresh. The post list is now diffed in place (keyed by post id), so unchanged posts keep their existing DOM nodes — SSE bursts, the 8s poll fallback, and cross-tab broadcasts can all fire together without repainting the column. When SSE is healthy the per-thread poll is suppressed entirely. -- Post column no longer shifts left/right when the pointer hovers the thread view. The Slack-style hover-reveal scrollbar now reserves its gutter at all times, so toggling the bar in/out doesn't reflow the column. +- Post column no longer shifts left/right when the pointer hovers the thread view. The scrollbar is now always mounted with a fixed width, with its thumb fully transparent by default and colored on hover — zero layout change when the pointer enters or leaves. (The earlier attempt with `scrollbar-gutter: stable` didn't actually work because the gutter property is a no-op when `scrollbar-width` is `none`.) - A single hard refresh (Cmd+Shift+R) is now enough to pick up new app.js / style.css after a deploy. The PWA service worker was using stale-while-revalidate for shell assets, which always served the previous version on the first load and only swapped in the new one on the next refresh — it now uses network-first with cache fallback, so the cache is only consulted when the network actually fails (offline). - _Add entries here as they ship. They get cut into the next `v` section at release time._ diff --git a/web/style.css b/web/style.css index 34b4e5b..23d045e 100644 --- a/web/style.css +++ b/web/style.css @@ -1379,34 +1379,45 @@ body.squad-collapsed #squad-list::-webkit-scrollbar { display: none; } /* WebKi min-height: 0; overflow-y: auto; padding: 14px 18px 20px; - /* Hide scrollbar chrome by default — cleaner reading surface; bar - reappears on :focus-within for keyboard users (a11y). */ - scrollbar-width: none; - /* Always reserve the scrollbar gutter on the right so the Slack-style - hover-reveal scrollbar below doesn't reflow the post column when the - pointer enters/leaves. Without this, toggling scrollbar-width from - `none` to `auto` on :hover physically pushes content ~10px left, then - back — the user-reported "闪" when the cursor moves over post-list. */ - scrollbar-gutter: stable; -} -#post-list::-webkit-scrollbar { display: none; } -/* Show scrollbar when the user hovers the messages pane (Slack-style: bar - lives at the right edge, appears as soon as the pointer enters the pane, - hides again when it leaves). :focus-within keeps it visible for keyboard - users (a11y). */ -#post-list:hover, -#post-list:focus-within { scrollbar-width: auto; } -#post-list:hover::-webkit-scrollbar, -#post-list:focus-within::-webkit-scrollbar { display: initial; } + /* Keep the scrollbar ALWAYS mounted with a fixed width, but make the + thumb fully transparent by default — hovering the post column then + just changes the thumb color, never the layout. The earlier attempt + (`scrollbar-width: none` + toggling to `auto` on :hover, optionally + with `scrollbar-gutter: stable`) doesn't work: `gutter: stable` is a + no-op when scrollbar-width is `none` per spec, so hovering still + reflowed the column by ~10px. This approach uses fixed-width WebKit + scrollbars (Chromium/Safari) and Firefox's `scrollbar-width: thin` + with an invisible track/thumb until hover. */ + scrollbar-width: thin; + scrollbar-color: transparent transparent; + transition: scrollbar-color 0.15s ease; +} #post-list::-webkit-scrollbar { width: 10px; } +#post-list::-webkit-scrollbar-track { background: transparent; } #post-list::-webkit-scrollbar-thumb { - background: rgba(0,0,0,0.25); + background: transparent; border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; + transition: background 0.15s ease; +} +/* Slack-style: thumb only becomes visible while the user is interacting + with the messages pane. :focus-within keeps it visible for keyboard + users (a11y). */ +#post-list:hover, +#post-list:focus-within { + scrollbar-color: rgba(0,0,0,0.25) transparent; +} +#post-list:hover::-webkit-scrollbar-thumb, +#post-list:focus-within::-webkit-scrollbar-thumb { + background: rgba(0,0,0,0.25); + background-clip: padding-box; +} +#post-list:hover::-webkit-scrollbar-thumb:hover, +#post-list:focus-within::-webkit-scrollbar-thumb:hover { + background: rgba(0,0,0,0.45); + background-clip: padding-box; } -#post-list::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.45); background-clip: padding-box; border: 2px solid transparent; } -#post-list::-webkit-scrollbar-track { background: transparent; } .empty { color: var(--text-soft); padding: 48px 12px;