Content Overflow and Cropping Issues in Geo Popup Modal on iPhone Devices

[Deva309]

Issue: We are currently facing an issue with the Geo popup modal, particularly on iPhone devices in landscape mode.

Here’s a breakdown of the problem:

Current Implementation:

• The Geo modal uses position: fixed and overflow: visible.
• On iPhone devices (especially in landscape mode), the Geo popup height exceeds the window height, causing content overflow.

Overflow issue:

• To address this, we implemented overflow: auto, which adds a scroll bar when the Geo popup height exceeds the window height. This works well in most cases.

New Challenge:

• Another popup modal is triggered on the click of a button inside the Geo modal. This inner modal also uses position: fixed.
• In portrait mode, the inner popup appears below the button, and its content overflows outside the Geo modal.
• While the overflow: auto fix works on most browsers, it fails on iPhone devices, leading to content cropping issues.

Iphone cropping issue

Proposed Solution:
As a potential fix for this scenario, we are considering displaying the inner popup always above the button (instead of below) to prevent content cropping and overflow issues, ensuring compatibility across devices.

I just want to discuss the solution before implementing it. Any suggestions would be greatly appreciated.

CC: @salonijain3 @bandana147 @sharmrj

[sharmrj]

Displaying the popup above the button when there isn't enough space below the button is probably the way to go in my opinion, unless we want to make the inner popup appear above the GRM rather than inside it.
We'd probably also have to change the direction of the arrow on the button so it's pointing in the direction of the popup.

[Deva309]

@vhargrave Could you please review this and provide your suggestions, as you worked on this issue last time? I just want to ensure we avoid the above issue. Is it okay to open the inner popup above the button?

[Deva309]

We are proceeding with a fix to ensure the inner popup in the geo modal consistently appears above the button.
Hence, we are closing this GitHub discussion.