Fixed position elements go underneath the statusbar and topbar


#1

Hello,

On iOS devices using WKWebView I am encountering an issue where the body is appropriately placed underneath the statusbar and topbar, but can scroll underneath them when it should not be able to.

This primarily affects elements that have a fixed position. When I scroll up they are where they should be, when I scroll down they move to be underneath the statusbar and topbar.

Screenshots attached.

Until I can find a solution I must use UIWebView, which includes a 500ms click delay.

Thank you in advance for any assistance.


#2

A couple of things here but the root of this issue is a) the iPhone-X “notch” has broken the consistency of iOS screen layouts and b) that Apple has provided very little in the way of hooks to integrate nicely with other native screen elements such as top bars and status bars.

In general, we’re advising folk to move away from using the native topbar in favour of pure HTML/CSS solutions. Most of the native UI modules only ever existed as, at the time, it was impossible to create a consistent experience with mobile browsers but that time’s long behind us now.

That said, you can try editing your src/config.json and trying out various combinations of the the core.ios.adjust_content_insets property and the CSS safe-area-inset-* properties.

Also check the brief section on the iPhone-X in our v2.6.x migration guide:

http://trigger.io/cross-platform-application-development-blog/2017/09/13/v2-6-migration-guide/