Skip to content

fix: prevent color decoration flicker by fixing CSS class lifecycle#304988

Open
yogeshwaran-c wants to merge 1 commit intomicrosoft:mainfrom
yogeshwaran-c:fix/color-decoration-css-class-lifecycle
Open

fix: prevent color decoration flicker by fixing CSS class lifecycle#304988
yogeshwaran-c wants to merge 1 commit intomicrosoft:mainfrom
yogeshwaran-c:fix/color-decoration-css-class-lifecycle

Conversation

@yogeshwaran-c
Copy link
Contributor

What kind of change does this PR introduce?

Bug fix

What is the current behavior?

When color decorations are recomputed (e.g. after editing text that contains color values), there is a visible flicker. The old CSS class references are disposed before new decorations replace them, causing a frame where existing decorations lose their background color styling.

Closes #235912

What is the new behavior?

New CSS class refs are built into a separate DisposableStore while the old CSS classes remain active. New decorations are applied first, then old CSS classes are disposed. This ensures decorations always have valid CSS classes.

Additional context

  • The fix is in ColorDetector.updateColorDecorators() in src/vs/editor/contrib/colorPicker/browser/colorDetector.ts
  • The field _colorDecorationClassRefs changed from readonly to mutable to support swapping the disposable store
  • removeAllDecorations() is unchanged since it intentionally removes everything at once

When color decorations are recomputed (e.g. after deleting text), the
old CSS class references were cleared before new decorations were set.
This caused a brief flash where existing decorations lost their
background colors.

Fix by building new CSS class refs into a separate DisposableStore,
applying the new decorations first, then disposing the old CSS classes.
This ensures decorations always have valid CSS classes.

Closes microsoft#235912
@vs-code-engineering vs-code-engineering bot added this to the 1.114.0 milestone Mar 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Flicker of many color decorations when deleting

2 participants