search

vmware-clarity / ng-clarity

Clarity Angular is a scalable, accessible, customizable, open-source design system built for Angular.
https://clarity.design
Other
311 stars 71 forks source link

Modal issue on iPhone/iOS #803

Open SamyMasadi opened 10 months ago

SamyMasadi commented 10 months ago

This is a bug report for the @clr Angular or UI versions of the design system. For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

Describe the bug

On iOS Safari, Clarity modals and modal backdrops inside the "content-area" do not overlay Clarity header and nav elements. If the modal is tall enough, it will extend under the header. Although the header is not interactive while a modal is open, which is to be expected, the header still has the appearance of being interactive because the modal backdrop is not overlaying it.

Similarly, modals within a datagrid cell do not overlay any content outside of the datagrid. The rest of the page outside the datagrid all appears "above" the modal and modal backdrop. Only the modal contents appear to be interactive, as is expected, but none of the page outside of the datagrid are "grayed out" because the modal backdrop isn't overlaying the whole page.

How to reproduce

Steps to reproduce the behavior on the Clarity Design website:

  1. On an iPhone, visit the Modals page.
  2. Click on any modal "Launch" button or "Show Modal" button.
  3. Note that the modal backdrop does not overlay the header.

clarity-modal-issue-iphone

Steps to reproduce the behavior on a Stackblitz example:

  1. On an iPhone, open the following example site: https://stackblitz.com/edit/clarity-light-theme-clr15-4bnmpv
  2. Click on either "Open Row 0 Modal" or "Open Row 1 Modal".
  3. Note that the modal and backdrop do not overlay any content beyond the datagrid. The modal extends under the borders of the datagrid as well as the rest of the page above and below.

clarity-modal-datagrid-issue-iphone-cropped

Expected behavior

The modal and modal backdrop should overlay all page contents.

Versions

Clarity version:

Device:

dtsanevmw commented 3 months ago

Hello @SamyMasadi,

We checked the issue and it's coming from well aware issues that we have with current generation of modals. However we are already working on plan to re-work the functionality behind that and the issue won't persist anymore.