Skip to content

fix: avoid permanent start-edge fade on browsers without scroll-drive… - #678

Open
xmengnet wants to merge 1 commit into
DEEIX-AI:devfrom
xmengnet:fix/scroll-fade-static-fallback
Open

fix: avoid permanent start-edge fade on browsers without scroll-drive…#678
xmengnet wants to merge 1 commit into
DEEIX-AI:devfrom
xmengnet:fix/scroll-fade-static-fallback

Conversation

@xmengnet

Copy link
Copy Markdown
Contributor

Summary

shadcn/tailwind.css 提供的 scroll-fade-x/y 工具类依赖 CSS scroll-driven animations(animation-timeline: scroll())实现"滚动后才显示边缘渐隐",但在不支持的浏览器(Firefox < 154、Safari < 26、Chromium < 115)会落入 @supports not 静态回退分支:左右/上下边缘渐隐永久常驻,与滚动位置无关。

由于侧栏会话标题的遮罩元素与文字零间距(32px 缩进加在父级 Link 上),导致每个标题的首字永久被淡化约一半(见截图);对话中的 Markdown 表格在未滚动时左列也被淡化。Chrome 115+ 走滚动驱动分支表现正常,因此该问题此前未被发现。

修复方式:在 globals.css 末尾追加一段顶层 @supports not (animation-timeline: scroll()) 覆盖,仅在不支持滚动驱动动画的浏览器中将起始侧渐隐变量置 0(--scroll-fade-s / --scroll-fade-t),保留末端"还有更多内容"的提示。使用通配选择器(unlayered 规则优先于 @layer utilities),可同时覆盖 sm:scroll-fade-x 等变体类。

影响范围(一次性修复全部 6 处使用点):侧栏会话标题(项目/最近/星标共用)、对话 Markdown 表格、聊天输入框附件列表、附件条、回复大纲/消息定位 rail、导航搜索。

支持滚动驱动动画的浏览器完全不受影响;属渐进增强,Firefox 154+ 将自动获得完整动态效果。

Change type

  • Bug fix

Affected areas

  • Frontend / UI

Verification

  • pnpm --filter @deeix/web build 构建通过(含 next build 类型检查)
  • 用项目 Tailwind v4 PostCSS 管道编译 globals.css,确认覆盖规则位于顶层、unlayered 优先于 utilities 层,且产物包含 @supports not (animation-timeline:scroll()){*{--scroll-fade-s:0px;--scroll-fade-t:0px}}
  • 手动浏览器验证:Firefox 修复前侧栏标题首字/表格左列被淡化,修复后显示完整;Chrome 表现与修改前一致

Screenshots, API examples, or logs

修复前,左侧一直显示不全:
image

修复后:
image

Configuration, migration, and compatibility notes

无配置、环境变量、数据库、API 契约变更。纯 CSS 渐进增强,向后兼容;旧浏览器仅失去滚动过程中的起始侧装饰性渐隐过渡,末端提示保留。

Documentation

  • Documentation is not needed for this change.

Security and privacy

  • No secrets, tokens, credentials, local config, or personal data are included.
  • User data access remains scoped by authenticated user context unless an admin-only path explicitly requires broader access.
  • Security-sensitive behavior was reviewed, including authentication, authorization, provider routing, file processing, billing, and admin APIs where relevant.

Checklist

  • I searched existing issues and pull requests.
  • Changes are focused and do not include unrelated refactors.
  • Tests or static verification were run where practical.
  • User-facing behavior, deployment steps, API contracts, or configuration changes are documented.
  • Generated artifacts are included only when this project explicitly requires them.
  • Caches, build output, .pyc files, .env files, and local storage data are not committed.

…n animations

Browsers without animation-timeline: scroll() (Firefox < 154, Safari < 26,
Chromium < 115) hit the static @supports-not fallback in shadcn's
scroll-fade-x/y utilities, which keeps both edge fades applied at scroll
position 0. Because the mask sits flush against the text, the sidebar
conversation titles lost their first character and chat tables faded their
first column. Force the start-edge fade to 0 in that fallback so only the
end-edge hint remains; scroll-driven browsers are unaffected.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant