I have a phonegap app that uses both AngularJS and jQuery Mobile.
I've noticed, that under ios, sometimes I get white flashes on page transitions - those are done using JQM's changePage.
I do have a fixed header and footer, which, by google, could be the source of the problem.
However, all results indicate that this was an issues that's already fixed in JQM, though it is still occuring in my app, which is running JQM 1.3.1.
Any ideas how to fix this?
Thanks!
EDIT:
I also tried adding user-scalable=no, disabling zooming and dropping data-position="fixed" from header and footer. None of these helped.
< meta name="viewport" content="width=device-width, initial-scale=1" />
to
< meta name="viewport" content="width=device-width, user-scalable=no" />
OR add this css
div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari /
-moz-backface-visibility:hidden; / Firefox */
}
.ui-page {
-webkit-backface-visibility: hidden;
}
if this not works then check https://github.com/jquery/jquery-mobile/issues/4024
If anyone still stumbles with this, I found this post:
how to speed up changepage in jquery mobile for phonegap app
Even though it's not entirely related, the first answer (without the js code, though it might work with it as well) solved my issue, and improved rendering in android devices as well.
Related
Mobile Safari is making some fonts bigger when I am rotating the phone.
That's is driving me crazy and I can't get rid of this behavior.
Read about -webkit-text-adjust-size and tried it with all possible combinations but it doesn't seem to work. Is there anything new added in iOS9?
Have you tried the META Viewport tag?
<meta name="viewport" content="width=device-width, initial-scale=1">
My site used to work in full screen when I created a Web App for it, however lately it doesn't show in full screen anymore. Is there something that has changed with the new iOS version or a new Safari version?
I still have the meta tag : <meta name="apple-mobile-web-app-capable" content="yes">
Just to confirm, I am refreshing the website and adding the bookmark to the home screen. I can't seem to figure out what has changed.
Thanks
RF
This is a subject that gives us a lot of problems whenever IOS is updated. So now iOS 9 is here we have once again been searching for answers. I am happy to say we have found a fix and it may well work for you too.
For iOS 8 we found that adding the following meta tag
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimal-ui">
... and scrolling the page about a bit and back to the top using JS would do the trick - which no longer works with iOS9
window.scrollTo(0, 1);
window.scrollTo(0, 200);
setTimeout(function() {
window.scrollTo(0, 1);
}, 100);
But, what we have now found is that changing the meta tag slightly has once again rectified the problem (notice the scale):
<meta name="viewport" content="width=device-width,initial-scale=1.01,minimal-ui">
I am trying to make my mobile website in to a webapp.
I configured the webapp settings:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no">
Overmore, I am using Bootstrap and have a navigation fixed at the top, so it scrolls with the user on mobile. I added a padding-top: 20px; to this navigation bar.
If I then open the website, that works. But saving it as a webapp uses the correct status bar, but the top padding has disappeared.
I found this question where some answers go into the problems currently on iOS 8.1 / 8.2. But I did not found an answer to my problem.
Does anyone have an idea how this is caused and can be fixed? Thank you!
I had the same issue and ended up injecting the margins via jQuery. e.g.
$("#my-div").css('margin-top', '60px');
Also, when my changes to the viewport meta tags weren't showing up I deleted the webapp icon and then went to the site and placed it again with a different name; my changes showed up and it refreshed normally from there.
Hope that helps.
I've stumbled across this strange Meteor JS behaviour when using the following meta tag in the head:
<meta name="viewport" content="width=device-width, initial-scale=1">
When tapping anywhere on the body in iOS Safari some kind of click/touch event is triggered. It's clearly visible because it creates and outline/highlight on the body just like it would for a normal link when it's clicked.
For a demo open this link on your iPhone:
http://metaviewportissue.meteor.com and click anywhere on the body.
Code is here:
https://github.com/st3phan/meteorviewportissue
When I remove the meta viewport tag the click/touch event on the body is gone.
Does someone know what's going on here and maybe how to get rid of this strange behaviour?
Versions:
Meteor 1.0
Safari 8.1
I am developing a mobile web site using Sencha Touch. In iOS7 Safari I cannot make the top address bar & the toolbar below go away. Sencha used to handle this upto iOS6 but some recent changes in iOS7 is causing this issue.
http://java.dzone.com/articles/safari-ios-7-and-html5
I read the above link & it seems this is also an issue for HTML5 Games & a few other apps.
The old window.scrollTo() which worked for iOS6 no longer works.
Add minimal-ui in your meta tag viewport, this will hide he address bar and browser controls in safari iOS7:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
More info on iOS7 and fullscreen mode for mobile websites: http://blog.initlabs.com/post/81716286465/how-to-display-websites-in-fullscreen-mode-in-ios7
With iOS 7 I don't think you really have a choice. Obviously Apple doesn't want developers doing this anymore, and even if someone finds another workaround it probably won't stick around for that long.
Honestly, I think getting fullscreen functionality is a fair trade off for users to install the app to their home screen. Obviously there are certain cases where this isn't true, but I guess I find it understandable to some degree. You should still be able to add the following meta tag and it will be fullscreen once added to home screen:
<meta name="apple-mobile-web-app-capable" content="yes">
There are a few nice libraries out there that add an "add to homescreen" prompt that you can set up to be rather unobtrusive with custom messages. In this case, might be best to embrace the change...