fix(text-field): focused outlined rendering issues#528
Merged
kelsos merged 2 commits intorotki:mainfrom Apr 29, 2026
Merged
Conversation
Replace the active+outlined compound's percentage translate (`-translate-y-1/2`) with a fixed-rem translate (`-translate-y-[0.5rem]`, ≈half the active label's natural height of `text-[0.75rem] × leading-tight`). The percentage translate was recomputed against the *current* label height. When `active` flips to false on blur, the class swap removes `!h-auto` instantly so `label.height` jumps from ~15px (h-auto) to the input's full height (~56px), and 50% of the new height (~28px) becomes the new starting transform. The transition then animates from -28px to 0 over duration-75, producing a visible upward overshoot before easing back. Anchoring the translate in rem keeps the start/end values consistent across the height swap and scales with the root font-size. Refs rotki#527
Add `transform-gpu` to the fieldset slot so the focus border is rasterized on integer pixel boundaries. At fractional y-coordinates with non-integer device pixel ratios (e.g. DPR 1.25), Chromium anti-aliases the 1.6–2px focus border across two physical pixel rows behind the floated label, appearing as "two thin blue lines crossing the label". Promoting the fieldset to its own GPU compositing layer snaps the layer's raster to integer pixels and eliminates the splitting. No layout or geometry change — only forces a layer. Refs rotki#527
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #528 +/- ##
==========================================
- Coverage 84.80% 84.79% -0.02%
==========================================
Files 145 145
Lines 5260 5260
Branches 1571 1571
==========================================
- Hits 4461 4460 -1
- Misses 799 800 +1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
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
2 participants
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
Two minimal fixes for outlined
RuiTextFieldfocus-state rendering issues, both reported in #527.-translate-y-1/2with fixed-rem-translate-y-[0.5rem]in the active+outlined compound, so the translate value doesn't depend on a label height that changes mid-transition.transform-gputo the fieldset slot so the focus border is rasterized on integer pixel boundaries, eliminating Chromium's AA splitting of the 1.6–2px border.Both bugs and fixes are described in detail in #527 (slow-mo transition trace + diagnosis for the overshoot; sub-pixel AA explanation for the line splitting). Commit messages mirror that detail.
Test plan
pnpm storybook→ Components > Forms > TextField > Outlined: focus-blur cycle has no upward overshoot of the floated label.Default,Outlined,OutlinedWithVeryLongLabel,Required,WithErrorMessage,WithSuccessMessagestories.file:dep — both symptoms gone.