fix(ui): timeline level3 dot clippath and box-shadow conflict#633
Conversation
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
…adow box-shadow gets clipped by clip-path, so :focus-visible on triangle dots had no visible focus ring. drop-shadow follows the rendered silhouette and renders the glow correctly. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
| .timeline-dot[data-level='3']:hover::before { | ||
| transform: translate(-50%, -50%) scale(1.15); | ||
| } |
There was a problem hiding this comment.
🟡 Hover scale on ::before for active level-3 dots is dead code due to CSS source order
.timeline-dot[data-level='3']:hover::before (line 257) and .timeline-dot[data-level='3'].active::before (line 262) have identical specificity (0,3,1). Because the .active::before rule appears after the :hover::before rule in the source, its transform: translate(-50%, -50%) always overrides the hover rule's transform: translate(-50%, -50%) scale(1.15) when both conditions are true. Since ::before only has content (and is thus only visible) when the dot is .active, the hover rule at line 257 can never produce a visible effect — it is dead code. For non-active dots, ::before has no content so hover does nothing; for active dots, the later rule wins. This means hovering an active level-3 triangle won't scale its glow background, unlike levels 1 and 2 where ::after's box-shadow scales with the transform.
Prompt for agents
The hover scale rule for the level-3 ::before pseudo-element at line 257-259 is overridden by the .active::before rule at line 262-273 due to equal specificity and later source order. Since ::before only renders when the dot is .active (it sets content: ''), this hover rule never has any visible effect.
To fix, either:
1. Remove the dead rule at lines 257-259 and instead add a combined selector after line 273:
.timeline-dot[data-level='3'].active:hover::before { transform: translate(-50%, -50%) scale(1.15); }
2. Or move the hover rule to after the .active::before rule block (after line 273).
Option 1 is more precise because it only applies the scale when the ::before is actually visible (i.e., when the dot is active).
Was this helpful? React with 👍 or 👎 to provide feedback.
Description / 描述
现在的第三层级节点是三角形, 在active之后没有阴影效果, 这是因为clippath和box-shadow冲突了
css加个before解决
bug1
复现方法: 设置节点为三角形, 点击该节点, 发现无高亮
我用人工微调的方法修复了下, 尽可能做到了最接近正方形和圆形的样式
bug2(我不知道怎么解决)
复现方法: 设置节点为三角形,, 按tab聚焦到该节点的时候, 发现没有圆环阴影
这个我没解决, 感觉很难复现和正方形和圆形节点一样的 focus-visible 效果
Visual Proof / 可视化证据
如图, 移动到最顶部(其实这还有个bug, 如果对话太短不会高亮第一个)的时候, 无法高亮
修复后
Browser Testing / 浏览器测试
Checklist / 检查清单
bun run lint,bun run typecheck,bun run formatandbun run build. / 我已运行代码校验、类型检查、格式化及构建。bun run test). / 我已添加/更新了必要的测试并确保通过（bun run test）。代码校验记录