Fixing iPhone X Bottom Safe Area Issue in WKWebView and Frontend CSS

During recent development we discovered that pages using height: 100% on iPhone X display a blank area at the bottom (the black bar), causing the page to be cut off. The issue appeared after switching from UIWebView to WKWebView .

Problem Description

When a single‑screen page is set to fill the screen with height: 100% , a white gap corresponding to the iPhone X bottom safe‑area appears, truncating the content.

iOS Client Solution

The root cause is that WKContentView does not include the safe area. The following native code forces the content view to cover the safe area:

if (@available(iOS 11.0, *)) {
    _webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
}

Temporary Front‑End Solution

While the iOS fix will be released in the next version, a temporary front‑end workaround sets the page height to 100% + safe‑area height and disables scrolling.

Obtaining Safe‑Area Height

iOS 11 introduced CSS environment variables for safe‑area insets. The four predefined variables are safe-area-inset-left , safe-area-inset-right , safe-area-inset-top , and safe-area-inset-bottom . For this issue we only need safe-area-inset-bottom , which represents the height of the bottom black bar in portrait mode.

Starting with iOS 11.2, the constant() function is deprecated in favor of env() .

Solution Implementation

html,body{
    height: 100%; /* compatible with older Android phones */
    height: calc(100% + constant(safe-area-inset-bottom));
    height: calc(100% + env(safe-area-inset-bottom));
    overflow: hidden;
}

Note: Both env() and constant() must be present, and their order cannot be changed.

After applying the CSS, the blank area disappears and the page displays correctly.

References

WkWebView adaptation for iPhone X – link

Web page adaptation for iPhone X – link