Hello,
Hope all is well!
We are currently building a mobile first website that has a tab bar with navigation at the bottom of the screen. On all devices it is pinned at the bottom of the screen and doesn’t move as the user scrolls through the page content. On iPhone X, XR, XS, XS Max the tab bar is appearing within the safe area. Is there a work around for this? Below are 2 screenshots of what we currently see:
Image examples:
On another note, we also noticed that the tab bar appears underneath the SFSafariViewController tab bar when open the site from gmail or a chat application that uses the SFSafariViewController within their native iOS application. We’ve found some relevant examples on StackOverflow but aren’t 100% sure how to solve for this within WebFlow.
StackOverflow Link: ios - Are there any workaround to avoid SFSafariViewController from hiding fixed position headers? - Stack Overflow
General CSS best practices for the iOS safe area: https://wpkraken.io/blog/designing-websites-for-iphone-x-guidelines/
Image example:
Please let me know if this makes sense and if you need more information from us to clarify.