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.
Related
We have a PWA (web app) that the user can add to the homescreen to make it look more like an app. Some users have reported a strange issue that only seems to appear on IOS sometimes when the following step has been made.
Open the app from the homescreen
Use the app for a while
Put it into background
Turn off the screen for a while
Turn the screen back on and put the app to foreground again
The bug is that nothing seems to happen when you click on a select or date input control. First I thought that there was some overlay in the app that was blocking the ui controls but the elements receive focus on click, but not options are shown.
Now it really becomes strange. When I tried to click a little bit under the select input an option was selected. The same thing occured with a time select. If I first clicked on the timeselect input control and then a little bit under, it updated the time.
So, the controls seems to be there but nothing is visible on the screen. I have only been able to reproduce this on my own once but multiple users have been reporting the same thing. The only way to work around the bug is to restart the app.
It seems to be for all native safari controls that shows some kind of modal/popover.
I've did an indepth investigation on this select dropdown problem and posted an issue at bugs.webkit.org: https://bugs.webkit.org/show_bug.cgi?id=238318
It's a problem with dropdowns of several components (such as select, input file/date/month) where either the animation to have the dropdown appear or disappear seems to get stuck. You can sometimes see the dropdown being tiny and very transparent (if you zoom into a screenshot) and sometimes you'll be able to select an option even though you don't see the dropdown.
Problem
We have an Ionic2 project. Ionic (on iOS) creates a Safari browser. Safari allows for what I call "overscroll". This is when you can scroll beyond the top or bottom of the page and the page snaps back.
One of our pages has a small signature pad. If a user tries to sign with their finger, they instead scroll the screen. The page content is small enough that it shouldn't be scrollable, but the overscroll causes the page to move.
Desired
We just want to disable the blasted overscroll.
Really all of our Ionic projects suffer from this drawback in some form or another, but this is the first project where it blatantly breaks functionality. In other cases it's just an annoyance.
Appeal
Is anyone familiar with how to disable this overscroll? Whether through ionic, a cordova plugin, or the HTML itself.
If I have understood you correctly then this is actually really easy to do.
Just add no-bounce to your <ion-content> element.
e.g.
<ion-content no-bounce>
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"/>
I'm writing a web app for the iPad using HTML5 and SenchaTouch. The app uses cache manifest to function offline. Once it has been added in the home screen and opened without Safari, it will refresh itself every time it is opened, even if just navigating to the home screen and back. The desired behavior is to leave the app, do something else, and then come back to the app with everything untouched.
An example of a similar app that displays the same (undesired) behavior can be found here: http://ignitedmediadesign.com/WebApp/index.html
I've read that using a cache manifest should have solved this problem on iPhone ( http://www.stevesouders.com/blog/2011/06/28/lack-of-caching-for-iphone-home-screen-apps/ ), but doesn't seem to have done the trick for either iPhone or iPad.
Is there another way to fix this? Is there some secret to cache manifest files that stops this that I may have missed?
I'm under the impression this is simply the nature of the "home screen" web apps that operate outside of normal Safari. I have an app that operates just fine in Safari with some minimal state saving, but the blasted non-Safari version refreshes every time. EDIT: Even the showcased O’Reilly example that uses a cache manifest reloads every time when added to the home screen.
You may want to look into creating "routes" (URL fragments) that point to a controller/action pair. Look into the MVC PhoneGap example (If not using PhoneGap, you can scroll past all of that stuff and implement your own data model and store). Also see this Sencha Touch MVC tutorial.
Also, most of the rendered sencha touch components seem to maintain state between changes of the active item. For example. I have a main TabPanel that contains all sub panels. When switching between tabs on the main TabPanel's TabBar, each sub panel maintains its rendering, unless I've set a listener or controller action to do otherwise.
Hope this helps.