search

IDEMSInternational / open-app-builder

PLH App Frontend
GNU General Public License v3.0
5 stars 24 forks source link

[BUG] iOS: popup close button behaviour #2274

Closed jfmcquade closed 1 month ago

jfmcquade commented 3 months ago

Describe the bug On iOS, the popup close button is obscured behind the popup itself when the popup content is large enough to be scrollable.

This seems related to #2243 in that it can be resolved by toggling seemingly any CSS rule on the element off and then on again.

To Reproduce I have observed this when running in a local simulator, I am yet to observe it when runnin gin appetize or on native device, but haven't tested extensively

Screenshots and videos

Using the popup opened by Button 3 on the example_pop_ups template.

https://github.com/IDEMSInternational/parenting-app-ui/assets/64838927/e575b5d7-cc03-4b9d-a789-7f36048f2cc8

chrismclarke commented 3 months ago

I think it might be related to how z-index and position are getting interpreted. I can recreate the issue on chrome if I set the .popup-content element as:

position: relative;
z-index: 1;

image

So I'm guessing there might be a difference between how chrome/safari interpret the inherited position property from parent components.

I might suggest trying to hardcode position: static to the .popup-content class or position: relative; z-index: 0; to see if either fix the issue, or trying similar combinations to ensure the close button sits on top of the content