This is a weird scenario, because normally I'd just use CSS. I'm developing an iOS app with steroids (similar to PhoneGap). The web view does not support the CSS fixed background.
Is there a solution to this? I haven't been able to find one. Thanks!
Actually I just tried a 'hack' and it worked. Here's the solution in case anyone else has this problem:
HTML:
<img class="background" src="img/background.jpg" />
CSS
.background {
z-index: -1;
position: fixed;
bottom: 0;
left: 0;
}
Thanks!
Related
I found a number of issues with the POSITION:FIXED property on iOS Mobile. But it didnt resolved my issue. In desktops and in Android devices, works perfectly. Even in MacBook Air also.
ISSUE:
I have a position:fixed header, and a position:relative content (using padding-top:height-of-header for alignment). When i scroll fast, it starts scroll and then suddenly, it jumps back to the top of the page. But this issue is not showing when we scroll slowly.
This is the code for header
.site-header {
position: fixed;
width: 100%;
top: 0;
z-index: 9999;
}
this is the code for main-content
.main-content {
padding-top: 80px;
position:relative;
}
Tried with -webkit-overflow-scrolling: touch; , transform: translate3d(0,0,0);.
Its an e-commerce website, developed in SHOPIFY.
the issue was, in shopify, there were some third party applications (that's how they used to call plugins) are used. so, somehow jQuery plugins got conflicts and once i remove the plugin, issue got resolved. i don't know how jQuery effects my css code. but it got resolved when i remove/update the library.
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.
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.
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.
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.
Position fixed doesn't work well with iOS, but I used position absolute in my cordova apps which never causes any issue for me.
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?
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
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
this works for me
position: sticky
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
I tested my website application on both my iOS devices and my Windows PC, along with the Google Chrome device toolbar. Any fixed elements inside the iFrame are fixed when using the website application on my Windows PC and Google Chrome device toolbar. However, any fixed elements inside the iFrame are not fixed on iOS devices. Apparently this could be a bug that iOS devices have and was wondering if there is a solution so that elements that are suppose to be in a fixed position are actually fixed on iOS devices. Here is the CSS code I have:
/* Div that contains the iFrame */
#interactWithNav {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
-webkit-filter: blur(5px);
filter: blur(5px);
display: table;
text-align: center;
}
/* iFrame that loads the page with the fixed elements */
#interactWithNavFrame {
border: 0;
width: 100%;
height: 100%;
}
If it were me, I would create a targeted test to prove these theories and show them.
I'd make a mini website with a fixed position element, and an absolute element (for good measure)
http://codepen.io/sheriffderek/pen/xqaYqM
Then I would make another mini website with an iframe of the source of that previous website example(in this case the debug CodePen version) http://s.codepen.io/sheriffderek/debug/xqaYqM
http://codepen.io/sheriffderek/pen/GWXQBN
Send this link to your phone:
http://s.codepen.io/sheriffderek/debug/GWXQBN
Then I'd use the debug version of that to test on the iPhone or whatever.
<header>
<h1>iFrame example with fixed position and absolute position to check on iOS and other devices</h1>
header....
<div class='fixed-thing'>fixed-thing</div>
</header>
<main>
main
<div class='absolute-thing'>absolute-thing</div>
</main>
and then...
<main>
<iframe src='http://s.codepen.io/sheriffderek/debug/xqaYqM' frameborder='0'></iframe>
</main>
Everything seems normal to me.
Can this help you explain the issue a bit more? Are you using any transform: translate in your code? Why are you positioning the iframe in an absolute container?
It appears that the iFrame is automatically full height on iOS no matter what you set it to, so no scrolling, which means fixed wouldn't even be detectable... See this thread: How to get an IFrame to be responsive in iOS Safari?
There's an iframe, which basically has more content than fits into the frame. The sizing of the frame is based on the browser screen size and lets the overflow scroll, which works perfectly on all browsers, except for iOS. On iOS, safari decides to resize the frame to fit the content. Not what you'd expect.
Example code on jsFiddle:
http://jsfiddle.net/R3PKB/2/
Try it out on your iOS devices:
http://jsfiddle.net/R3PKB/2/embedded/result
The HTML:
<div class="frame_holder">
<iframe class="my_frame">
// The content
</iframe>
</div>
The CSS:
body {
position: relative;
background: #f0f0f0;
}
.frame_holder {
position: absolute;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
background: #ffffff;
}
.my_frame {
width: 100%;
height: 100%;
border: 1px solid #e0e0e0;
}
You can make it work by adding a wrapping div with overflow: auto; and -webkit-overflow-scrolling:touch;.
Here's your example with it: http://jsfiddle.net/R3PKB/7/
According to previous questions on SO it's a bug since iOS 4. I found more info here:
https://stackoverflow.com/a/6721310/1047398
iframe on iOS (iPad) content cropping issue
This is an old question, but since it comes first on google and the issue exists on nowadays ios devices, I repost a better fix that I found on this page:
How to get an IFrame to be responsive in iOS Safari?
Basically, if you have an iframe with scroll (let's say a twitter widget), the solution above won't work very well because it makes the parent scrollable. The fix that worked for me is replacing height: 100% with height: 1px; min-height: 100%;.
If iOS Safari is displaying your iframe content from a different origin than expected (i.e. it is shifted over by some pixels), try adding scrolling="no" as an attribute to the iframe. This should prevent it from automatically fitting its content.
More here.
using height: 1px; min-height: 100%; did not work for me, though I did not need a scrolling element. I had to use the overflow:auto; on a surrounding div instead. Note that this method is discouraged as it may have unintended consequences, but I tested on Android/iOS and desktop browsers and could not find any issues yet. fingers crossed.
This is a nice post from Andy Shora on some iOS iframe nuances: http://andyshora.com/iframes-responsive-web-apps-tips.html
I have integrated an email plugin for phonegap. But, when i open up the email from the phonegap app, the header gets cut off. Here are the steps i follow :
Here is the css , i added to the header :
div[data-role="header"] {
position: fixed;
top: 0;
left: 0;
right: 0;
min-height: 45px;
}
.ui-header .ui-title, .ui-footer .ui-title{
font-size: 18px;
}
Any help will be appreciated... Thanks in advance !!! :)
I hate to answer my own question, but here is what i did.
As suggested in one of the stackoverflow answer, i took out the "height=device-height" from meta-tag in index.html.
But, that fixes issue for IOS 5, but still exists for IOS6.
So, this sort of fixed the issue.
http://osdir.com/ml/phonegap/2012-09/msg01797.html