Web: smooth trace-viewer animations for live mode #248
Conversation
🦋 Changeset detectedLatest commit: 6beb891 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
| @@ -1,5 +1,6 @@ | |||
| .traceNode { | |||
| position: relative; | |||
| transition: width var(--transition-duration) var(--transition-ease); | |||
There was a problem hiding this comment.
CSS custom properties --transition-duration and --transition-ease are used in 18 transition declarations throughout the CSS file but are never defined anywhere, which will cause the transitions to fail or be ignored by the browser.
View Details
📝 Patch Details
diff --git a/packages/web-shared/src/trace-viewer/trace-viewer.module.css b/packages/web-shared/src/trace-viewer/trace-viewer.module.css
index db81cb4..8666dd6 100644
--- a/packages/web-shared/src/trace-viewer/trace-viewer.module.css
+++ b/packages/web-shared/src/trace-viewer/trace-viewer.module.css
@@ -1083,6 +1083,8 @@
.traceViewer {
--scrollbar-width: 0;
+ --transition-duration: 0.2s;
+ --transition-ease: ease-out;
position: relative;
display: flex;
font-family: var(--font-sans);
Analysis
CSS custom properties --transition-duration and --transition-ease undefined, breaking 18 transition declarations
What fails: Transitions on width, right, left, background-color, and border-color properties in the trace-viewer component don't work because they reference undefined CSS custom properties.
How to reproduce:
- Open the trace viewer component in a browser
- Interact with trace spans (e.g., hover, expand, change width)
- Expected smooth transitions don't occur because the transition declarations are invalid
Root cause: The CSS file packages/web-shared/src/trace-viewer/trace-viewer.module.css uses 18 transition declarations with var(--transition-duration) and var(--transition-ease) (lines 3, 31-32, 86-87, 131-133, 148-149, 783, 817, 831, 841, 923-924, 1073-1074), but these CSS custom properties were never defined anywhere in the codebase.
According to CSS Custom Properties specification, when a custom property is undefined and used in a property value, it becomes a "guaranteed-invalid value" and the entire declaration becomes invalid at computed-value time, causing the browser to ignore the transition.
Expected behavior: All transitions should work smoothly. For comparison, other transitions in the same file use hardcoded values like 0.3s ease-out (lines 33-34) which work correctly.
Fix: Defined the CSS custom properties at the .traceViewer class level:
--transition-duration: 0.2s;
--transition-ease: ease-out;This makes all 18 transition declarations valid and enables smooth animations for span width, position, and color changes in the trace viewer.
No description provided.