How to prevent a fixed to bottom HTML element from scrolling in WKWebView on iPhoneX

Question

I'm building a hybrid app with Turbolinks iOS, most of the app is rendered in a WKWebView. But I have a problem with my layout. There is a navigation bar fixed to the bottom of the screen, it works fine in every phone except for iPhoneX. When a users scrolls down on iPhoneX it moves the navigation bar up even though its position is fixed to the bottom, and when the user scrolls down it goes back to its original place.

nav-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0; 
  height: 0;
}

Here is an example of its behavior:

How can I prevent the bottom bar from moving at all?

PS. Just to clarify I don't think this is a problem with my HTML or CSS, it works fine on every browser and other iPhones.

Answer 1

I do not know how Turbolinks works but I had similar issues with navigation bars only on the iPhone X when "Safe Area Layout Guides" was not enabled.

After that, you can set your constraints to that Safe Area instead of your superview.

Here is also some reference by Apple about about that topic: https://developer.apple.com/ios/update-apps-for-iphone-x/