Skip to content

[Bug]: Flickering of items with large dividers in Overflow component #28711

@ValentinaKozlova

Description

@ValentinaKozlova

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
    Memory: 11.48 GB / 31.59 GB
  Browsers:
    Edge: Spartan (44.22621.1992.0), Chromium (114.0.1823.82)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

no

Reproduction

https://react.fluentui.dev/?path=/docs/components-overflow--default#larger-dividers

Bug Description

Steps:

  1. Open https://react.fluentui.dev/?path=/docs/components-overflow--default#larger-dividers

  2. Change width of resizable area to 654px in dev tools in Larger dividers section
    Expected result:
    image

  3. Change width to 653px
    Expected result:
    image

  4. Change with to 652px

Actual Behavior

Flickering happens on resize.
image

Expected Behavior

image

Animation:

flickering

Logs

No response

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions