[split-button] Drop down items do not fully display using Safari

[doreenbrinkman]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Actual Behavior

Calcite split-button does not fully display the dropdown items using the Safari browser.

Safari screenshot:

Chrome screenshot (working):

Expected Behavior

All dropdown items are visible

Reproduction Sample

https://github.com/doreenbrinkman/calcite-debug

Reproduction Steps

1. Clone the reproduction sample and checkout the branch dore582-safari-dropdown
2. Run the app

Reproduction Version

2.8.3

Relevant Info

MacOS Safari 17.4.1

Regression?

No response

Priority impact

impact - p1 - need for current milestone

Impact

The only workaround is to reduce the width of the window and the dropdown items will re-render above. Changing the overlayPositioning does not help.

Calcite package

• [ ] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [X] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Online

[geospatialem]

Related https://github.com/Esri/calcite-design-system/issues/8028

[jcfranco]

Here's a codepen version of the repro case: https://codepen.io/jcfranco/pen/ZENpLxd

[jcfranco]

It looks like this is a Safari browser bug.

As a workaround, you could unset the header/footer z-index used in modal (see updated example):

calcite-modal {
  --calcite-z-index-header: initial;
}

I'll go ahead and label this as blocked until the browser bug is resolved.

[github-actions[bot]]

cc @geospatialem, @brittneytewks

[doreenbrinkman]

As a workaround, you could unset the header/footer z-index used in modal (see updated example):

I just tried the workaround in our React/Typescript application (sample above, did not try there but in our app) and it flashed the entire dropdown once and went back to just showing the menu cutoff.

Currently, our workaround is it set the placement of the calcite-split-button dropdown to top-end so it renders above.

if (isSafari) { const dropdown = target?.shadowRoot?.querySelector("calcite-dropdown"); dropdown?.setAttribute("placement", "top-end"); }`

[jcfranco]

@doreenbrinkman Would you be able to share more info about dropdown cutoff you're observing?

[jcfranco]

@doreenbrinkman Following up on our chat, it looks like my workaround wasn't being applied properly because Vite was injecting the styles afterward, which would override it. Would you mind applying the following to your repro case?

diff --git c/src/main.jsx w/src/main.jsx
index d529fa9..7a1d40e 100644
--- c/src/main.jsx
+++ w/src/main.jsx
@@ -23,12 +23,16 @@ ReactDOM.createRoot(document.getElementById("root")).render(
       widthScale="s"
       open
       outsideCloseDisabled
-      dismissible>
+      dismissible
+      style={{
+        "--calcite-z-index-header": "initial"
+      }}>
         <div slot="header">Safari split button</div>
         <div slot="content">Add some content here</div>
         <CalciteSplitButton
           slot="secondary"
           primaryText="Save and leave"
+          overlayPositioning="fixed"
           scale="m">
           <CalciteDropdownGroup selectionMode="none">
             <CalciteDropdownItem>Save and leave</CalciteDropdownItem>

[doreenbrinkman]

The workaround works using either inline styling or using a class. I forgot to pass in overlayPositioning fixed to the calcite-split-button. We are switching to this workaround as it will work with all the browsers. Thanks!