I am using Angular UI Router. Whenever I click on a link with ui-sref the address bar from ios mobile browser shows up. For example when I scroll down, the address bar hides and if I click on a link and the page transition finishes the ui address bar shows up instantly. This makes it less user friendly as the page suddenly shifts a little downwards because of the address bar.
This website has the same issue that I have.
I have found a website that doesn't have this issue although they are not using angular.
This does not happen on android chrome. And only happens in the ios safari. The version that I have tested in was ios 9.
I have tried overflow hidden but this is not the solution that I want because then the address bar is always visible.
What's triggering this behavior?
I have not tested this, but I remember having a similar issue a while back.
I think you could add this meta tag:
<meta name="viewport" content="minimal-ui”>
Check out these other posts: Post 1, Post 2.
Note: minimal-ui is no longer supported in iOS 8 and above (More info). However, not all users have upgraded to iOS 8, so there is still a reason to add it to your project.
Related
I am developing an app (IOS platform) using HTML5, CSS3, angular and cordova(3.8) and stuck with an major issue.
I have a page with footer having three buttons. On click of each button a modal comes up from the bottom. Modal position is set to fixed and inside it as scroll-able container. scroll-able container contains a text area where user can input some text.
Whenever the modal comes up, text area is focused so that keyboard comes up by default. The issue is whenever native keyboard comes up webview is pushed up and entire modal gets scrolled.
I saw same issues been posted by others and I tried few solutions mentioned in reply for those questions like using ionic keyboard plugin, setting scrollTop to 0 on textarea focus. But nothing worked out.
In config.xml, I have set DisallowOverscroll to true.
It would be great helpful if someone help me with this issue ?
Since I have upgraded jQuery Mobile to 1.3 and PhoneGap to 2.5, I have a problem for page changing in my iOS application.
When I click to a link, for a few milliseconds, I see a "no page" state. It's not a white screen, but the background of my "body" element.
I have made some researches on the web, but it looks like no tricks work for me. Most of them tell to disable transition of jQM. But it is already the case for me.
I have tracked jQM event to see what happens, and apparently when I use the method changePage(), it hides the current page, and then show the final page. And during these two methods, I can see this "no page" state, with my body background.
So it is not the flickering navigation that occurs during transition (because I disabled transition), it's something else.
Anyone would have a suggestion to fix this annoying problem (I cannot post image with my reputation)?
This issue has some suggestions on changing the $.mobile.defaultTransitionHandler to use the simultaneousHandler instead of the default sequentialHandler.
https://github.com/jquery/jquery-mobile/issues/4024
This has improved page transition speed in my application (with $.mobile.defaultPageTransition set to 'none'), but I am still dealing with occasional white flashes.
i'm developing a simple three tabs app for Android and iPhone, using IBM Worklight as framework. Every tab links to a div with data-role="page", as jQuery Mobile specifications.
If I implement the jquery fixed persistent tabbar like is explained there (http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-a.html), i'm encountering some flickering on the tab item in page transition (with any transiction effect).
If I set the default transition to "none", I could resolve this problem, but I lost the transiction native-like effect.
This behavior appears only if i test the App with a real android device (Xperia Neo, GS2).
If i navigate trough the pages of http://jquerymobile.com/demos/1.2.0/ with my smartphone, especially here: http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-d.html i can't see the strange behavior, but the footer won't be persistent trough the pages, it just re-render like the whole content and this is worse (this happen with the stock browser or Dolphin, instead looks very well by using Chrome).
Is there a way to improve this effect or there is another way to implement fixed persistent tab bar?
I used as reference the default Android Contacts App.
Maybe you're getting this flicker because you're navigating between pages using rel="external". Try to pass from one page to the other without ajax and you'll see that flickering will dissapear
The problem is due to poor performance of the WebView of the Android environment in rendering 3d transition.
Solved by removing the transition effect with:
$.mobile.defaultPageTransition = "none";
Something else that could help is putting these attributes in the AndroidManifest.xml:
<supports-screens
android:anyDensity="true"
android:largeScreens="false"
android:normalScreens="true"
android:smallScreens="false"
android:xlargeScreens="false" />
<application
android:debuggable="false"
android:hardwareAccelerated="true"/>
With reference to the question I asked couple of days back, it seems to me that address bar cannot be hidden from a xpages mobile web application when it is launched from a href link. Choice is limited to href as "location.assign" or any javascript will not work on mails accessed by lotus traveller. I tried almost 20 different variations published by other experts to hide address bar and none seems to work. Am I wrong in stating that "it is not possible to hide address bar in Xpages mobile web application on ipad when not launched from home screen"?
The following works on iPhone and iPod Touch (and is similar to the solution I linked to in the answer to the other question that you mention).
Create a client-side JavaScript library with the following logic:
function hideAddressBar(){ window.scrollTo(0, 1)}
window.addEventListener("load", hideAddressBar, false);
Add the following to a layout custom control or similar in order for this to run on all the XPages where you want to hide the address bar (here I assume that the client-side JavaScript library is called addressbar.js:
<xp:script clientSide="true" type="text/javascript" src="/addressbar.js"></xp:script>
Have a look at the ITANA Tasks project on OpenNTF which uses this solution to hide the address bar.
For iPad it is not possible to hide the address bar when running in Safari. To hide the address bar on iPad you need to launch the app from the home screen (and set the usual required meta tags).
I am building a cross-platform app using jQueryMobile and Phonegap. Currently using jQM 1.1.0 and Phonegap 1.6.1.
The page transition function sometimes just seems to break down when the user clicks a button or list item that links to another page in the app.
<a href="#page2">
This kind of link is what the whole app is made of. But depending on god knows what, sometimes when you click a link the app stalls. External links will still be followed, and buttons that don't trigger any page changing work fine. But anything with href and $.mobile.changePage seems to be broken.
This problem occurs in iPad Simulator and iPhone Simulator, not in Chrome. It seems to have something to do with the type of page transition specified (i.e. fade or slide or flip etc). Some transitions seem to cause problems, sometimes it seems to be the lack of a specified transition that is the cause, and sometimes neither of those explanations have any traction.
Before I add a whole bunch of code, I'm interested if anyone has similar experiences.