[BUG] iOS: footer template

[jfmcquade]

Describe the bug
Follow-up to #2234

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

Screenshots and videos

Initial.emulation.mov

[chrismclarke]

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]

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]

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

[jfmcquade]

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:

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:

Screen.Recording.2024-04-04.at.15.54.10.mov

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]

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.