Fixed header disappear when scrolling down in webview in iOS 11

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.

position: fixed has always been a problem with iOS. It seems that in every version of iOS the problem persists. Now, I couldn't find anything regarding the change of behaviour of your application from iOS 10 to 11, you could consider reporting this as a bug; on the other hand having seen the multitudes of people who encountered this problem and the fact that affects more or less all the recents versions of iOS I would suggest not to use position: fixed.

The most common workaround is transform: translateZ(0), this not only works on iOS and prevent any possible flickering, it also forces the browser to use hardware acceleration to access the GPU to make pixels fly. It should work also without the prefix -webkit- from iOS 9.

I had this very similar issue with a Cordova project built for iOS, which uses a webview. Cordova uses the UIWebView by default as its webview engine and I tried all the possible fixes mentioned in this thread and many others. Finally our only solution was to change the webview engine from UIWebView to WKWebView (https://developer.apple.com/documentation/webkit/wkwebview). With Cordova, introducing the WKWebView is pretty straightforward with a plugin https://github.com/apache/cordova-plugin-wkwebview-engine

After introducing WKWebView and dealing with some of the issues it causes we are no longer experiencing the flickering or disappearing fixed positioned elements while scrolling in iOS 11.