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.

Solution 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.

Solution 2

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.

Solution 3

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.

Solution 4

We had the similar issue and it got fixed with below 2 plugins

https://github.com/apache/cordova-plugin-wkwebview-engine https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix

First plugin will change default WebView to WKWebView and second plugin provide fix for CORS issue that we see for using WKWebView.

Solution 5

The trick is to force GPU acceleration. Do this by adding translate3d to the #header element.

transform: translate3d(0,0,0);

If elements nested inside the #header element continue to disappear add translate3d to them as well.

View more solutions

Comments

[Bergerova]

I have tried using transform: translateZ(0), but it doesn't fix the problem

[Bergerova]

I have tried using transform: translate3d(0,0,0), but it doesn't fix the problem

[Dedering]

What happens if you apply translate3d(0,0,0) to #header * { and target the nested elements as well?

[David Schumann]

Doesn't fix this problem for me either

[David Schumann]

This fixed it for me too. But it breaks other stuff, like downloading and accesssing files. How is this not a bigger issue? Cordova pracitcally being unusable for the newes iOS release?

[Akash Pal]

It didnt work for me, somehow my angular didnt load, just have a blank screen.

[Huw Davies]

not working for my case either :( and this element is position: relative;

[Paolo Forgia]

Apparently this solution worked until iOS 11, when I'll found a solution I'll update this answer. Thank you for the feedback

[Huw Davies]

@PaoloForgia you're quite right, it's now an issue in iOS11 and I think it'll cause quite a lot of people problems!

[Bergerova]

Hi, thank for your answer. I already tried this solution, but as you said, it cannot be a valid solution in production. The scrolling becomes very slow...

[Oook]

Yeah... I wish I had something better to report. This issue is making me nuts. It doesn't help that I'm fairly new to this sort of thing. I'll keep working on it and watching this space. Somebody has to come up with a solution sooner or later.

[abarax]

This answer is actually working for me. I'm not sure if it's appropriate to reward the bounty for it though, as it does not solve the problem with the standard UIWebView. However if we hit the deadline this might be the one that gets it.

[Penar]

This worked great for a fixed-positioned element that doesn't show up on first load in a WKWebview (but does display after scrolling). Thanks!

[Igor Trindade]

That's worked perfect for me! Actually event improved the usability of my app with this wkwebview engine... Thanks a lot!!!

[Akash Pal]

This worked perfectly. Still have to test the app fully with WKWebView. Important: Important Note: 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.

[Claes Gustavsson]

Dilip, Im using phonegap build and the engine plugin is on npm so it installs. But how do I install the wkwebviewxhrfix? Do I include the folder src/ios to my project? Thanks.

[Dilip]

@ClaesGustavsson - Try with "phonegap plugin add github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix". If that does not help, you can probably download the whole repo from github on your project folder and then install the same from there.

[Claytronicon]

I had this same issue, and position:sticky did the same thing. Changing to WKWebView fixed it

[Claes Gustavsson]

Thanks Dilip. With the github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix can I load file from my server with that or just local files in the phone?

[Dilip]

You should be able to install from the server. "phonegap plugin add github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix" not working ?

[sdym]

Now I have a display issue on iOS 14 & iOS 15, this acceleration method is not working. The fixed header would have a 1-pixel gap above occationally when I do scrolling.