Fixed header disappear when scrolling down in webview in iOS 11

Question

I have a native iOS app with a webview to display web content. I have a fixed header in my app with the following properties:

#header {
    height: 60px;
    background-color: @mainColor;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 1;
}

Before I upgraded to iOS 11 everything worked fine. Now when I scroll down/up the header disappears during the scroll, and when the scroll is done, the header appears again.

This can also be reproduced in Xcode 8.

Answer 1

I'm just writing some code, try with one by one

• Try with below

  self.automaticallyAdjustsScrollViewInsets = false
  

• Try with below

  [self.webView.scrollView setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentNever];
  

• Try with below (change your code)

  header {
      height: 60px;
      background-color: @mainColor;
      color: #ffffff;
      padding: 10px;
      text-align: center;
      position: fixed;
      width: 100%;
      z-index: 1;
      transform: translateZ(0);
      -moz-transform: translatez(0);
      -ms-transform: translatez(0);
      -o-transform: translatez(0);
      -webkit-transform: translateZ(0);
      -webkit-font-smoothing: antialiased;
  }
  

  And some helpful links might be useful for you!

• http://ayogo.com/blog/ios11-viewport/

• https://forums.developer.apple.com/thread/90472
• How to fix the iOS 11 input element in fixed modals bug
• https://github.com/PierBover/ios-iframe-fix
• https://stanko.github.io/ios-safari-scoll-position-fixed/

From Apple official note:

Important:

Starting in iOS 8.0 and OS X 10.10, use WKWebView to add web content to your app. Do not use UIWebView or WebView.

So you should try once with WKWebView.