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.