fix: avoid permanent start-edge fade on browsers without scroll-drive… - #678
Open
xmengnet wants to merge 1 commit into
Open
fix: avoid permanent start-edge fade on browsers without scroll-drive…#678xmengnet wants to merge 1 commit into
xmengnet wants to merge 1 commit into
Conversation
…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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
Affected areas
Verification
pnpm --filter @deeix/web build构建通过(含 next build 类型检查)globals.css,确认覆盖规则位于顶层、unlayered 优先于 utilities 层,且产物包含@supports not (animation-timeline:scroll()){*{--scroll-fade-s:0px;--scroll-fade-t:0px}}Screenshots, API examples, or logs
修复前,左侧一直显示不全:

修复后:

Configuration, migration, and compatibility notes
无配置、环境变量、数据库、API 契约变更。纯 CSS 渐进增强,向后兼容;旧浏览器仅失去滚动过程中的起始侧装饰性渐隐过渡,末端提示保留。
Documentation
Security and privacy
Checklist
.pycfiles,.envfiles, and local storage data are not committed.