webui: fix flicker issue on dismiss animation on overlay primitives#22773
Merged
Conversation
vignesh191
changed the title
Contributor
Author
Contributor
allozaur
approved these changes
May 6, 2026
ServeurpersoCom
approved these changes
May 6, 2026
cetarthoriphros
pushed a commit
to cetarthoriphros/llama.cpp
that referenced
this pull request
May 9, 2026
…gml-org#22773) * add fill-mode-forwards * generated diffs
meh
pushed a commit
to meh/llama.cpp
that referenced
this pull request
May 10, 2026
…gml-org#22773) * add fill-mode-forwards * generated diffs
rsenthilkumar6
pushed a commit
to rsenthilkumar6/llama.cpp
that referenced
this pull request
May 19, 2026
…gml-org#22773) * add fill-mode-forwards * generated diffs
baramofme
pushed a commit
to baramofme/llama-cpp-turboquant
that referenced
this pull request
May 23, 2026
…gml-org#22773) * add fill-mode-forwards * generated diffs
baramofme
pushed a commit
to baramofme/llama-cpp-turboquant
that referenced
this pull request
May 23, 2026
…gml-org#22773) * add fill-mode-forwards * generated diffs
winstonma
pushed a commit
to winstonma/llama.cpp
that referenced
this pull request
May 27, 2026
…gml-org#22773) * add fill-mode-forwards * generated diffs
fewtarius
pushed a commit
to fewtarius/llama.cpp
that referenced
this pull request
May 30, 2026
…gml-org#22773) * add fill-mode-forwards * generated diffs
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
3 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.
Overview
While working on #22736, I happened to notice that the tooltips on the "+" button flicker on their dismiss animation in
ChatFormActionsAdd. This has been an existing issue not related to my changes, but just was a visual annoyance for me. The tooltip fades out, then briefly snaps back to being fully visible before finally unmounting.You can observe this in either the local Storybook or the actual llama-server. To easily observe, I used Chrome DevTools's animation tab and set it to 25%, to investigate the animation clearly. I observed that
animation-fill-mode: nonewas present on the element, and it causes it to revert to its base styles when the popover/tooltip is dismissed (this is the flicker observed). I believe this is related to bits-ui and how it doesnt do the DOM removal, only until the element's animation finishes, so there's a very brief period where the element has its base styles before being unmounted.I discovered that this issue is not just for tooltip, but is present on all the overlay elements used in the webui. The fix applies to all 11 overlay components (tooltip, dropdown, popover, dialog, alert-dialog, sheet, select, and backdrops) grepped using AI to find all instances of this closing animation.
I applied the fix which was a small addition of add
data-[state=closed]:fill-mode-forwardsnext to the existing exit-animation classes so its base regular styles are not interfering with the dismiss animation.Additional information
Before fix (with flicker):
flickering.mov
After fix (no flicker):
noflicker.mov
I validated this manually using a local
llama-serverbuildRequirements