Fixed header disappear when scrolling down in webview in iOS 11 - ios

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.

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

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

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

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

Answer 6

Position fixed doesn't work well with iOS, but I used position absolute in my cordova apps which never causes any issue for me.

Answer 7

You may have already seen this post on some changes in iOS 11, but if not maybe it would apply to your situation?
One of the viewport-fit: contain/cover/auto options?
Or changing your code to use a constant value for the padding-top?

Answer 8

Did you try to use position:sticky instead of position:fixed?
In past it works really well on iOS.
Please make note that is position:sticky requered rule top to be defined.
So final solution in your case should be:
#header {
height: 60px;
background-color: #mainColor;
color: #ffffff;
padding: 10px;
text-align: center;
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
z-index: 1;
}
Also if you need extra offset from top you could adjust top:0; rule from zero to any number in px.
And one more final note: that is sticky element will not extract element from document flow and will act as ordinary document element (like div with position:static or relative), but not like absolute positioned element (in case of fixed or absolute).
http://caniuse.com/#feat=css-sticky

Answer 9

I have been battling against this very same problem myself.
The issue (at least as manifested in the app I am working on) only seems to happen on screens which are a combination of tall (in that they require a good deal of scrolling) and fairly complex.
Generally, at least for me, the problem only seems to really manifest when momentum scrolling kicks in.
Although there's one screen in particular, which contains 15 left-right-scrollable rows of images, that will break the head/footer no matter how slowly you scroll it.
In my own defense... I had absolutely nothing to do with the design. :-)
At any rate...
After much searching an experimentation, I have managed to come up with a "solution" of sorts.
Mind you, I'm not claiming this is the way to go here. But perhaps someone with more experience than I have in the mobile app space, can take this information and extrapolate something less sucky from it.
The first piece looks like this:
html,
body {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-overflow-scrolling: auto;
}
And then for the container that acts as the main body of your screen:
.main-content-area {
overflow-y: auto;
height: 100%;
}
This is going to kill momentum scrolling for your app. Which is not great, I know. But as a result of curtailing the user's ability to scroll very quickly, screen rendering seems to be able to keep up and the problem goes away.
Again, I'm not recommending this as a viable solution for production. Because it's obviously not great.
I'm offering this up more as a possible stepping-stone to a real solution, in the hopes that it helps.
===>>> UPDATE:
I have a working solution. But, as others before me have pointed out, I had to avoid the use of Fixed Positioning.
Instead, I used Absolute Positioning to define Header, Footer and Main Content sections of the page. Then allowed scrolling only in the Main Content section.
If it helps, I have the POC I put together available on BitBucket

Answer 10

this works for me
position: sticky

Answer 11

I had this same issue with both position:fixed and position:sticky. Chaging from UIWebView to WKWebView fixed it for me:
#import <WebKit/WebKit.h>
....
#property (weak, nonatomic) IBOutlet WKWebView *myWebView;
"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."
https://developer.apple.com/documentation/webkit/wkwebview