Hybrid App - In App browser status bar overlapping

Hi,  We are seeing an issue where when we open a certain website(Facebook Workplace) from within our application inside an inappbrowser that the top navigation overlaps the status bar of the device(all devices, ipad, iphone7, iphoneXs). It only seems to happen on facebook and workplace as others open correctly. We are using the latest version of the inappbrowser.      
2 answers

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.