Skip to content

[Bug]: Fabric component has button, input, and textarea selectors that add unneeded overhead to style recalcs #24260

@jspurlin

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 response

Reproduction

https://github.com/microsoft/fluentui/blob/master/packages/react/src/components/Fabric/Fabric.styles.ts#:~:text=%27%26%20button%27%3A%20inheritFont,textarea%27%3A%20inheritFont%2C

Bug Description

Actual Behavior

The Fabric component has selectors that match all button, input, and textarea elements inside of it (and sets { font-family: 'inherit' }) which can lead to a lot of additional checking the browser must do when recalculating styles
image

Expected Behavior

the Fabric node shouldn't have these blanket selectors

Logs

No response

Requested priority

Normal

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

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions