search

geist-org / geist-ui

A design system for building modern websites and applications.
https://geist-ui.dev
MIT License
4.35k stars 335 forks source link

Modals not vertically centered on mobile browsers #380

Closed zoink closed 4 years ago

zoink commented 4 years ago

Bug report 🐞

Version & Environment

Version 84.0.4147.135 (Official Build) (64-bit) ^1.8.0-canary.7

Expection

The behavior I expect is ...

On mobile browers (iOS) Safari, Chrome, modals should be vertically centered.

Actual results (or Errors)

Modals are not vertically centered - due to the mobile top and bottom menu bars? Below is an example illustrating this behavior:

IMG_2867

zoink commented 4 years ago

To reproduce: open https://react.geist-ui.dev/en-us/components/modal on iOS Safari, click on "Open Modal". Top margin is taller compared to bottom margin.

ghost commented 4 years ago

This must be the result of the browser panel(s). The same effect can be seen in Chrome. But since Chrome doesn't have a bottom accessibility panel, the effect is not so prominent.

zoink commented 4 years ago

Makes sense — might be same reason why 100vh doesn't work on mobile.

On Mon, Aug 31, 2020 at 8:37 AM, Harsh Karande < notifications@github.com > wrote:

This must be the result of the browser panel(s). The same effect can be seen in Chrome. But since Chrome doesn't have a bottom accessibility panel, the effect is not so prominent.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub ( https://github.com/geist-org/react/issues/380#issuecomment-683856680 ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/ACRBWAO2JVIFK6VYIAOYJF3SDO7VPANCNFSM4QPLXA5Q ).

unix commented 4 years ago

It looks like a problem caused by height, and I'm following up.

unix commented 4 years ago

This is a compatibility issue, but there is no good solution at present. I've refactored some of the layout logic of Modal to make sure it works in a variety of environments, fortunately, there is no change in the user API.

You can see this change here: #382 , I added a new example to the document, and you can see how the changes work on your device, If everything goes well, please let me know that I will merge and release a new version.

zoink commented 4 years ago

Just tested it out on my own device, it's now vertically centered even if bottom menu bar is present or not. The only issue is that on Safari/Chrome, the bottom menu bar is present on page load, modal is fine; however, once I scroll down the bottom menu bar disappears, so the modal is no longer vertically centered.

But this is just a minor edge case, overall it's a lot better — thanks for improving it!

On Wed, Sep 02, 2020 at 1:33 AM, witt < notifications@github.com > wrote:

This is a compatibility issue, but there is no good solution at present. I've refactored some of the layout logic of Modal to make sure it works in a variety of environments, fortunately, there is no change in the user API.

You can see this change here: #382 ( https://github.com/geist-org/react/pull/382 ) , I added a new example to the document, and you can see how the changes work on your device, If everything goes well, please let me know that I will merge and release a new version.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub ( https://github.com/geist-org/react/issues/380#issuecomment-685444728 ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/ACRBWANATDKOFWATNRGVXHDSDX7OBANCNFSM4QPLXA5Q ).