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

[doreenbrinkman]

Check existing issues

• 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
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Online

[geospatialem]

Related #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]

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!

[geospatialem]

Spike to determine if the Safari bug fix mitigates, and/or if further action is needed, or we need to push out once Safari has been mitigated.

[DitwanP]

It doesn't seem to have been mitigated as I still see the same bugged behavior listed in the issue and from Franco's repro that he posted on the safari bug report.

[github-actions]

cc @geospatialem, @brittneytewks

[geospatialem]

Added as blocked by the Safari bug Franco mentioned above and since there is a workaround (in the same comment linked) adding in the p - low label based on the Safari bug effort, which has been open since 2016.

[doreenbrinkman]

Not seeing this issue after converting calcite-modal to calcite-dialog so that is also a workaround.
https://codepen.io/doreenbrinkman/pen/wvVNdjV