IPhone Notch and BDK Mobile

Need help Plugins
1

I’m working with the BDK to create a mobile app, and I have some weird issues with the layout and the iPhone notch.

I have a floating top header and a regular group that is scrolling below it. Both are aligned to the top of the page with no margin or padding on the top.

However, when I scroll, the scrolling group appears above the floating top header for about 10 pixels before disappearing underneath the notched area.

I’ve tried some of the header CSS that’s floating around on the forums, but none seem to work. Does anyone have a similar issue and figured out the right way to handle this?

2

Hello, I have the problem, did you figure it out ? Thanks !

3

BDK support wound up getting back to me to suggest the following be added to the page header (#appwrapper and #menuwrapper are my layers that wrap entire app "views/screens/whatever you want to call them):

<meta name='viewport' content='initial-scale=1, maximum-scale=1, viewport-fit=cover'>
<style>
body {
min-height: calc(100vh) !important;
}
#appwrapper, #menuwrapper {
min-height: calc(100vh) !important;
}
</style>