calcite-modal is being blocked by another element, but only in Safari

[MikeTschudi]

Check existing issues

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

Actual Behavior

We have an instant app that displays a map of features in a left panel and a table of features in a right panel. If one selects multiple features and clicks the "Delete" button, we display a calcite-modal as a double-check before performing the deletion. All is good on Windows (Chrome, Edge, Firefox) and on Mac Chrome. On Mac Safari, however, the calcite-modal is partially blocked.

Here is what the app modal looks like in all but Safari:

And here is what it looks like in Safari:

The calcite-modal is triggered by a component that resides in an action-bar:

I can't tell if this is a bug in our app or in calcite: I am having trouble isolating the cause.

Expected Behavior

I expected the modal to be on top, as it is outside of Safari

Reproduction Sample

https://codepen.io/miketschudi/pen/GRaZwEd

Reproduction Steps

In the CodePen, click on the Delete button to open the modal.

The modal is nested because we're using nested components; the modal is in the delete-button component; all other non-calcite-components have been replaced by divs.

Reproduction Version

2.8.3

Relevant Info

• Windows 10
  • OK: Chrome 125, Edge 125, Firefox 126
• Mac
  • OK: Chrome 125
  • not OK: Safari 17.5

Regression?

went back to 1.0.3 and still see issue

Priority impact

impact - p3 - not time sensitive

Impact

Affects Safari users of the Manager Instant App; workaround is to delete items one-by-one via a different Delete button.

Calcite package

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

Esri team

ArcGIS Solutions

[bcree11]

@MikeTschudi We noticed a similar issue in crowdsource-reporter today. I found a workaround for this by overriding calcite-modal's position property to be fixed and it works as I expect it to.

  calcite-modal {
    position: fixed;
  }

Manager app in Safari:

[MikeTschudi]

@bcree11, very nice--thank you! Works in crowdsource-manager as well, which was the original issue.

[jcfranco]

@bcree11 Thanks for sharing your workaround!

This seems related to https://bugs.webkit.org/show_bug.cgi?id=160953. I managed to create a repro case based on the original one using plain HTML/CSS (submitted as an additional test case).

It looks like this might have been introduced by https://github.com/Esri/calcite-design-system/pull/9545 where modal's host position was changed from fixed to absolute. Worth noting that fixed on the host element is also consistent with other implementations:

• https://web-components.carbondesignsystem.com/?path=/story/components-modal--playground
• https://sap.github.io/ui5-webcomponents/components/Dialog/
• https://vaadin.com/docs/latest/components/dialog
• https://material-web.dev/components/dialog/stories/
• https://lion-web.netlify.app/components/dialog/overview/
• https://explore.fast.design/components/fast-dialog
• https://shoelace.style/components/dialog
• https://mui.com/material-ui/react-dialog/
• https://ant.design/components/modal

@macandcheese Do you think it'd be possible to restore fixed positioning? I prototyped this in https://github.com/Esri/calcite-design-system/pull/9545 and testing looks promising.

[github-actions[bot]]

cc @geospatialem, @brittneytewks

[macandcheese]

@macandcheese Do you think it'd be possible to restore fixed positioning?

As long as it all still works when the modal is in the Modals slot, in those cases where we want to constrain it to the Shell, it does have to be absolute I believe.

[jcfranco]

@macandcheese Awesome. I think we have a path forward then. The slotted modal & alert screenshot test should cover it, right?