Library

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

System Info

System:
    OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (32) x64 AMD EPYC 7763 64-Core Processor
    Memory: 111.20 GB / 125.78 GB
    Container: Yes
    Shell: 5.8.1 - /bin/zsh

Are you reporting an Accessibility issue?

None

Reproduction

Reproduction requires an older browser

Bug Description

Actual Behavior

On older browsers (eg., Chrome 80), borderBoxSize is not supported. useMessageBarReflow makes an unguarded dereference of that value, causing a TypeError in such browsers

Expected Behavior

No error should be thrown, and the component behavior should degrade gracefully.

Logs

Error stack from Outlook telemetry on Chrome 80:

TypeError: Cannot read property '0' of undefined
    at ResizeObserver.<anonymous> (https://res.public.onecdn.static.microsoft/owamail/hashed-v1/scripts/owa.67643.m.5c33ac97.js:1:3225)

Translated:

at webpack://owa/node_modules/@fluentui/react-message-bar/lib/components/MessageBar/useMessageBarReflow.js:24

Requested priority

High

Products/sites affected

Outlook

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.