Giters

vmware-clarity / ng-clarity

Clarity Angular is a scalable, accessible, customizable, open-source design system built for Angular.

Home Page:https://clarity.design

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Modal issue on iPhone/iOS

SamyMasadi opened this issue · comments

commented

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:

  • v13.x
  • v15.x
  • Other:

Device:

  • Type: iPhone 14 Pro Max
  • OS: iOS 16.4.1
  • Browser: Safari
  • Version: 16
commented

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.