Fix flickering AI-tip input in label settings#830
Merged
backnotprop merged 1 commit intoMay 31, 2026
Conversation
The "Add AI instruction tip" editor in Settings > Labels flickered intensely on open. Its `tip-slide-open` keyframe animated `max-height` (a layout property) to 60px -- larger than the input's natural height -- with no animation-fill-mode. Inside the OverlayScrollbars viewport and a flex `min-h-0` container this formed a layout feedback loop that restarted the animation ~40x/second, jittering the editor height. Animate `opacity` and `transform` instead, so no layout property is animated. Measured on the live demo, animation restarts and height reversals dropped from ~17/10 to 0, with height stable at its natural value. Fixes backnotprop#829 Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
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.
TL;DR
The Settings > Labels AI-tip (lightbulb) input flickered intensely on open. Root cause: the open animation animated
max-height(a layout property), which fed a layout loop inside the scroll viewport and restarted the animation ~40x/s. Switched the keyframe toopacity+transform(compositor-only), eliminating the flicker.Background / Context
Each Quick Label row has a lightbulb ("Add AI instruction tip") that opens a tip editor sliding in below the row. The slide used a
max-height: 0 -> 60pxkeyframe. Expected: a smooth one-time reveal. Actual: rapid, continuous flicker on every open (#829).Observed problem
tip-slide-openanimatesmax-height, a layout/reflow property, with noanimation-fill-mode.min-h-0container; animating its height feeds a layout loop that restarts the animation ~40x/second, jittering height between 8-31px.key={index}remount, unbatched setState, ResizeObserver loop, scroll-into-view churn) were measured and ruled out: 0 node remounts, 0 DOM/style mutations, 0 scroll events, 1 ResizeObserver fire.Fix approach
Animate compositor-only properties (
opacity+transform: translateY) instead ofmax-height. No layout property is animated, so the loop cannot form. The keyframe end state equals the element's natural rendered state, so noanimation-fill-modeis needed. The parent row already hasoverflow-hidden, so the initialtranslateY(-4px)is clipped cleanly.Modified files
packages/ui/components/Settings.tsx—tip-slide-openkeyframe (2 lines).Verification criteria
Clicking the lightbulb opens the tip editor with no flicker; the editor settles at its natural height; typing, Enter-to-save, Esc-to-cancel, and toggling labels with/without tips all behave normally.
Test list
Verified on the live demo (share.plannotator.ai) by patching the page's keyframe in place with the fix CSS, in the real layout:
References
Closes #829