Hi Dan, maybe try adding iphone x css environment variables to your stylesheet, i.e.
/* Make sure the status bar is properly overlayed of the web view */ /* Status bar height on iOS 11.0 */ padding: constant(safe-area-inset-top) constant(safe-area-inset-right) 0 constant(safe-area-inset-left); /* Status bar height on iOS 11+ */ padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
Just a small update on this. The screenshot that Dan is showing is a web application opened in the in-app browser. We were hoping that the in-app browser would be loading inside a window that we can control the CSS of. If we could add the CSS that Wilfried provided above to the “window” that the in-app browser loads in, this would have worked a treat. But the in-app browser does not have this “window” and only respects the site’s CSS. This means that if we want the application to “respect” the safe-area, the site would need to add it to their Style Sheets. From what we have seen, there is no way to add css to an in-app browser screen.