Skip to content

[Bug]: Stack style selectors are greatly contributing to recalcStyle cost  #24259

Description

@jspurlin

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows Server 2016 10.0.14393
    CPU: (12) x64 Intel(R) Xeon(R) CPU E5-1650 v4 @ 3.60GHz
    Memory: 36.45 GB / 63.90 GB
  Browsers:
    Chrome: 103.0.5060.134
    Internet Explorer: 11.0.14393.2007

Are you reporting Accessibility issue?

no

Reproduction

https://codepen.io/jspurlin/pen/jOzxGWo

Bug Description

Actual Behavior

The selectors created by Stack end up being the most expensive selectors that need to be processed with a style recalc. Here's a screenshot of the most expensive selectors that are run during the style recalc of the multiline ribbon in Office Online, the top hitters are almost all Stack related
image

Expected Behavior

The Stack to not introduce so much overhead for style recalcs (the selectors should be much more scoped)

Logs

No response

Requested priority

High

Products/sites affected

Office Online

Are you willing to submit a PR to fix?

no

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

Assignees

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions