Skip to content

fix(MessageBar): v9 MessageBar Resize Flicker Fix#36405

Open
emmayjiang wants to merge 3 commits into
microsoft:masterfrom
emmayjiang:v9-messagebar-resize-flicker-fix
Open

fix(MessageBar): v9 MessageBar Resize Flicker Fix#36405
emmayjiang wants to merge 3 commits into
microsoft:masterfrom
emmayjiang:v9-messagebar-resize-flicker-fix

Conversation

@emmayjiang

@emmayjiang emmayjiang commented Jul 16, 2026

Copy link
Copy Markdown
Contributor

Previous Behavior

When resizing the MessageBar, it causes flickering.

New Behavior

The MessageBar no longer flickers when resizing.

Related Issue(s)

  • Fixes Bug 37036: [Fluent AI] [Web] [Bebop chat input]: Screen flickers during Resize causing visual instability.

@emmayjiang
emmayjiang requested a review from a team as a code owner July 16, 2026 22:49
@emmayjiang emmayjiang changed the title feat(fai): v9 MessageBar Resize Flicker Fix feat(MessageBar): v9 MessageBar Resize Flicker Fix Jul 16, 2026
@emmayjiang emmayjiang changed the title feat(MessageBar): v9 MessageBar Resize Flicker Fix fix(MessageBar): v9 MessageBar Resize Flicker Fix Jul 16, 2026
@github-actions

Copy link
Copy Markdown

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.293 MB
325.786 kB
1.293 MB
325.814 kB
41 B
28 B
react-headless-components-preview
react-headless-components-preview: entire library
247.531 kB
71.417 kB
247.572 kB
71.442 kB
41 B
25 B
react-message-bar
MessageBar (all components)
22.271 kB
8.176 kB
22.304 kB
8.196 kB
33 B
20 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
66.281 kB
19.002 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
225.836 kB
67.998 kB
react-components
react-components: FluentProvider & webLightTheme
39.504 kB
13.112 kB
react-portal-compat
PortalCompatProvider
5.341 kB
2.146 kB
react-timepicker-compat
TimePicker
140.677 kB
45.99 kB
🤖 This report was generated against 838a28171bc01fdaf6139104225f35e6b7621e09

@github-actions

Copy link
Copy Markdown

Pull request demo site: URL

@@ -0,0 +1,7 @@
{

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Menu 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Menu.Nested Submenus Small Viewport Stacked.nested menu.chromium.png 856 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png 723 Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 12 Changed
vr-tests-react-components/ProgressBar converged 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png 51 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 33 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png 81 Changed
vr-tests-react-components/Skeleton converged 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Skeleton converged.Translucent Skeleton with rectangle.default.chromium.png 10 Changed
vr-tests-react-components/TagPicker 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png 658 Changed
vr-tests-react-components/TagPicker.disabled - High Contrast.disabled input hover.chromium.png 1319 Changed
vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png 677 Changed

There were 3 duplicate changes discarded. Check the build logs for more information.

@smhigley smhigley left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, not seeing the violent flicker anymore :D

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.

2 participants