Wrapping Breadcrumb in Safari overflowing parent container instead of wrapping

[brandonlenz]

Describe the bug

In Safari (14.0.3) on MacOS the Wrapping Breadcrumb component overflows its parent container rather than wrapping.

Steps to reproduce the bug

I created a test-app that reproduces this behavior here (This app is just rendering the raw html with css classes imported):

1. Go to 'https://github.com/brandonlenz/test-uswds-app'
2. Clone the repo
3. In the project directory run either

> yarn
> yarn start

or

> npm install
> npm start

4. With Safari, open a browser to where the app is running (likely http://localhost:3000/)
5. Resize the window to the point where the breadcrumbs should wrap.
6. Note that they do not wrap (screenshots below)

Expected behavior

The wrapping breadcrumbs should wrap as they do in other browsers, respecting the parent container's width.

Screenshots

The wrapping breadcrumb wrapping in Chrome:

The wrapping breadcrumb overflowing its container on Safari:

It is important to note when starting up uswds and viewing the component in Safari, wrapping behavior is working:

Similarly, on the usdws website, wrapping behavior is working:

System setup

• USWDS version:
  • Originally found using 2.8.0+
  • Replicated with 2.10.0 as well
• Device: Macbook Pro
• Operating system: MacOS Big Sur 11.2.1
• Browser and version: Safari v14.0.3

Additional context

Originally discovered in trussworks/react-uswds#869

Note: Because the behavior works in the uswds examples, but not when imported into a project such as the test project provided, intuition leads me to believe that Safari requires a parent element to be styled a certain way in order to properly enforce wrapping.

[mejiaj]

Thanks for reporting this! It's a strange one. Seems to be a quirk in Safari with how HTML is being output.

For example, in your demo if you edit the HTML that gets rendered and you add breaks like:

<nav class="usa-breadcrumb usa-breadcrumb--wrap" aria-label="Breadcrumbs">
  <ol class="usa-breadcrumb__list">
    <li class="usa-breadcrumb__list-item">
      <a href="#" class="usa-breadcrumb__link">
        <span>Home</span>
      </a>
    </li>
    <li class="usa-breadcrumb__list-item">
      <a href="#" class="usa-breadcrumb__link">
        <span>Federal Contracting</span>
      </a>
    </li>
    <li class="usa-breadcrumb__list-item">
      <a href="#" class="usa-breadcrumb__link">
        <span>Contracting assistance programs</span>
      </a>
    </li>
    <li class="usa-breadcrumb__list-item usa-current" aria-current="page">
      <span>Women-owned small business federal contracting program</span>
    </li>
  </ol>
</nav>

That displays properly. Looking into alternative ways we can get the same behavior reliably — across all browsers with and without HTML minified.

[brandonlenz]

@mejiaj It is indeed a strange one, kudos on figuring it out! Thanks for picking this up so quickly!