search

IDEMSInternational / open-app-builder

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

[BUG] iOS: footer template #2243

Closed jfmcquade closed 3 months ago

jfmcquade commented 3 months ago

Describe the bug Follow-up to #2234

On iOS, the icons in the footer template disappear when navigating to some templates.

Screenshots and videos

https://github.com/IDEMSInternational/parenting-app-ui/assets/64838927/693dc219-bab9-47f7-9811-d998befbd334

chrismclarke commented 3 months ago

This might not just be an ios issue, but more devices with a notch (e.g. think pixel3a might have similar), usually related to how the code has been setup to handle safe-area views identified by the platform.

I'm not sure if this is something we've explicitly looked into in the past, I think the ionic nav-bar component automatically handles this but likely more work required for full layouts. A couple potentially useful links:

https://ionicframework.com/docs/theming/advanced#safe-area-padding https://github.com/AlwaysLoveme/capacitor-plugin-safe-area

jfmcquade commented 3 months ago

Can confirm this issue is present on devices as well as simulators (tested on iPhone SE 3rd gen, iOS 17.3.1).

Seems to be an issue with webkit-* CSS variables, e.g. webkit-tap-highlight-color, applied to the icons in the a elements. But the behaviour in simulator is inconsistent when toggling these various style rules off and on: the same combination of style rules can leave the icons visible or not.

chrismclarke commented 3 months ago

Just to check, is the issue also apparent on safari desktop or mobile browsers? Or only when running on device?

jfmcquade commented 3 months ago

Just to check, is the issue also apparent on safari desktop or mobile browsers? Or only when running on device?

Good question. I haven't been able to replicate on Safari on Desktop, but the issue is present on Safari on a (simulated) iOS device:

Screenshot 2024-04-04 at 15 51 47

I'm also now less confident that it's do with the webkit-* CSS variables, as it seems that toggling any unrelated CSS rule can fix the issue:

https://github.com/IDEMSInternational/parenting-app-ui/assets/64838927/945113df-a9d1-4995-b882-a28e993fb880

The fact it's present in Safari mobile does suggest I should possibly try researching the issue more broadly than as a Capacitor/Ionic issue

chrismclarke commented 3 months ago

Might again be one for just hardcoding the color to 'white' as it seems to maybe not always be picked up correctly. Also could be worth trying to update ionic components to latest version in case any include fixes.