New iOS chat headers occasionally hide behind Safari navigation controls when viewing through the iOS app

Question

This relates to viewing chat rooms from the App. I do not know if it occurs when viewing the chat rooms directly in Safari. I can get this to recur but I can't figure out what causes it.

Normally, the iOS Safari navigation controls aren't in the way... like this:

But sometimes, the header slips behind the Safari navigation controls:

This makes it difficult to read the room count and really hard to tap on the room selection drop down menu or the hamburger menu...

Can we figure out what is causing this and see about making it not happen any more?

Alternately, Safari generally hides the URL/Search bar at the top along with the forward/back arrows at the bottom unless you tap for them or scroll up on the page. If hiding were possible in this case, that would be great. If not, preventing it from happening would be appreciated.

---

iOS App Version 1.4.5
iOS Version 9.2.1
iPhone 6

Answer 1

Update

I've reproduced this in iOS 9.3.2. The issue here is that SFSafariViewController is not properly calculating the body height in the CSS calculation height:calc(100%-88px). This is causing the middle section to be about 20pt too tall making the page scrollable. This can cause either the header or the text entry field to be partially hidden. I've filed radar 26867702 with Apple about the issue.

---

This appears to be a bug in Apple's SFSafariViewController. It's probably plotting space for the page based on a collapsed navigation bar, then expanding the status bar because the page can't scroll and not properly resizing the content. I've not yet been able to reproduce it in 9.3.2 so maybe it's fixed.

As to why the navigation bar doesn't collapse, it's because the web page itself isn't scrollable. It's a 100% height page with a fixed top and bottom bar and scrollable content in the middle. Not sure why it was designed this way but it could relate to some poor Safari behavior around focussing fixed position text fields on scrollable pages. It could be possible to design this in a different way, and that may fix the main issue of the top being hidden, but I'm inclined to leave well enough alone.

As far as how Facebook's app works, we'll never be able to replicate that because we're displaying the web in fundamentally different ways. Facebook has essentially built their own browser into the app, for a higher degree of customization and likely tracking. Our app hands off the browsing experience to Apple which presents a simplified version of Safari.