calcite-action-group - Actions are cut off in Safari when action group has fixed overlay positioning in a panel

[lboyd93]

Check existing issues

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

Actual Behavior

In Safari, the grouped actions in the drop down are cut off when expanded.

Expected Behavior

The grouped actions should not be cut off, but they should overlay the rest of the calcite panel. This is the behavior in Chrome and Firefox.

Reproduction Sample

https://codepen.io/driskull/pen/MWZNOMR?editors=1000

Reproduction Steps

1. Open sample in Safari: https://codepen.io/driskull/pen/MWZNOMR?editors=1000
2. Select the grouped actions drop down. Note it only shows four actions and it's all within the panel.
3. Open the sample in chrome and repeat step 2. Note all the actions are shown and it overlaps the panel.

Reproduction Version

1.9.2

Relevant Info

macOS 13.6 (22G120) Safari Version 17.0 (18616.1.27.111.22, 18616)

Regression?

No response

Priority impact

p2 - want for current milestone

Impact

This issue impacts the ArcGIS Online Map Viewer and custom ArcGIS Maps SDK for JavaScript applications used in Safari that utilize popups with many actions. The actions listed at the end of the group will be unusable.

cc @driskull

Example of JS SDK application: https://codepen.io/laurenb14/pen/bGOXayX?editors=1000

Calcite package

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

Esri team

ArcGIS Maps SDK for JavaScript

[driskull]

This one looks like a Maps SDK issue. I think we can close it.

[driskull]

Reopening, seems like it does happen in safari within a flow/panel

[asangma]

I've done some testing. It seems like it may be coming from the overflow: hidden rule in CalcitePanel.

I have a Codepen in which I turn off the overflow: hidden on Panel and it seems to work. I'm not sure if it breaks other stuff though.

https://codepen.io/mtb-alan/pen/poGJJaM?editors=0100

[github-actions[bot]]

Installed and assigned for verification.

[geospatialem]

@DitwanP Can you verify the issue above in the Safari browser with the example above with next?

[DitwanP]

Verified on Safari

[geospatialem]

Reopening from the revert above https://github.com/Esri/calcite-design-system/issues/8028#ref-pullrequest-2126306731

[jcfranco]

Confirmed this is still an issue with the latest: https://codepen.io/jcfranco/pen/rNbNKgx?editors=1000.

Here are Matt's findings from the revert PR. 🕵️

[github-actions[bot]]

Installed and assigned for verification.

[DitwanP]

🍯 Verified locally on dev

Screenshot: (Safari - Version 17.5)