Using jQuery mobile panel animations with PhoneGap, on the iPhone, the animation appears to happen in sections. Either the top half moves first and then the second half, or items with text move at a different time to everything else. Works fine on Android.
Anyone come across this before?
Thanks
We resolved this by using xCode to build the iPhone version rather than using PhoneGap. Looks like a PhoneGap issue.
Related
AN Ionic application am a working on is having some odd behavior when run in the iOS simulator (Xcode 7.2.1). My login screen when normally run looks like:
When editing the username field however, I see some sort of toolbar popup at the bottom:
Worse then that however is when I go over to the password field:
I thought at first that this may deal with the native WebView, but it only happens in the simulator. Not when run on the actual device or through ionic serve. Any ideas what is going on here? Why this odd behavior?
EDIT
Also, the app launches with the default Cordova splash screen even though I have set a splash with Ionic. Even so, it should be showing the Ionic splash as opposed to the Cordova one.
EDIT #2
Many times, the Cordova status bar fails to work and my status bar is black as opposed to white.
While this looks weird for you in iOS Simulator, and for me in Chrome's device emulator devtool, it's 'desired behaviour' in Ionic.
Ionic is designed with mobile focus in mind, so when emulating a mobile device, they hide elements to simulate the native keyboard.
Ionic wrote a blog post about this, in fact:
Getting the keyboard to play nicely with the web layer was challenging for several reasons. Probably the biggest issue is the variation in behavior across devices and platforms when the keyboard is shown.
In iOS, not only does the web view resize differently when the keyboard shows in versions 6.1, 7.0, and 7.1, but it is affected differently, and sometimes completely oppositely, by including or excluding the viewport meta tag. Throw support for tablets and landscape orientation into the mix and trying to make every scenario on every device work nicely can have you quickly creating three new issues for every one you fix.
The blog post goes on to say they wrote a Keyboard plugin for Cordova, which is supposed to perform keyboard related hiding and element changing as faster and more accurately. You can find that GitHub repo here.
I've run into a problem with Bootstrap's .top-nav only on Safari for iPhone. When scrolling through a .dropdown-menu, after releasing my finger from the phone, it seems to "keep" or "catch" the location my finger was and hover over that list-item, keeping the CSS style for that element's :hover. It doesn't attempt to direct the url anywhere, but it can be a little confusing to the end-user.
This does not happen on my Android phone or in the desktop browser at extra small width (no-touch).
I understand this could be a difficult question to answer, but I'm hoping somebody else has run into this problem on their own and knows the root cause / a fix.
Bootstrap 3, latest version of Safari for iPhone 5. Thank you!
edit: oh, also, this is Bootstrap integrated into Adobe Business Catalyst. I don't think that should make a difference, but it might be worth saying.
I am building iphone app using sencha touch 2 command. App works fine except, when I open it on iphone it shows splash screen and then shows white blank screen for 1-2 seconds. I believe it could be the issue of gathering all sencha js files to execute. But is there any way, we can show temporary screen instead of white blank screen?
I am not using phone gap to build iphone app.
Thanks,
Viral.
In phonegap based applications, there will be a provision for increasing the splash screen duration. Search for the same thing. You may find a solution for the way you are building your app(not phonegap)
Edit: Try lazyload.. i.e., while the content is loading use a throbber like thing. Because blank screen may seems to be like the application is not working properly
In July I built an iPhone web-app using jQTouch. On iOS 4 I had no problems with the web-app: The built-in jQTouch animations (slide left, slide right) etc were smooth as silk.
However, since the upgrade to iOS 5, these core page transition animations (slide left, slide right and flip) have become very jerky.
The web app can be found here (please add it to your home screen on your iOS 5 iPhone):
To see the effect, once it's added to your home screen, start the app and keep tapping the main buttons - Speed, Distance or Time.
I've done a lot of Googling and have found nothing, though I'm sure that other developers must have been / will be affected by this issue.
The issue is not just limited to my 3GS device as I have tried it on other people's devices (including iPhone 4) and I see the same issue, but only on iOS 5.
Stuff I have tried:
updating my jquery.js to different versions - including the latest - animations still jerky
updating jQTouch to the latest version - animations still jerky
stripping out all JavaScript, only leaving jQTouch and its initialization - animations still jerky
removing all of my custom css, only leaving the default jQTouch CSS - animations still jerky
removing all CSS, apart from just the CSS3 animations in jqtouch.css - animations still jerky
removing html elements - i noticed that when i removed all of the select and input elements from the web app, the animations became smooth again. However, there is nothing strange about the mark-up or CSS attached to these elements. Could this issue simply be to do with having too many elements on the page at once during an animation?
So it seems this issue is to do with HTML elements rather than JS or CSS, although I really can't figure out why...the mark-up is all valid apart from the iphone specific attributes i've used such as placeholder and autocapitalize etc.
Strange thing is that the animations on the jQTouch demo still seem smooth on iOS 5.
Any help/suggestions much appreciated.
Thanks!
Edit: Also, the button on the 'Info' page that 'bounces' has become jerky too. This uses the jQuery UI bounce effect. This was animation completely smooth on iOS 4.
I am developing phonegap app in iphone,after successfully viewing pdf file
(from server) on new HTML page,the vertical scrollbar get disable ,even i get back to the
list page ,the list does not get scroll,this happen only if i run the app directly in
simulator (not from xcode),any one know ,how to resolve this issue.
thanks in advance.
regards,
mayur
To display pdf in phonegap, have lots of trouble, but best solution so far,is to used ChildBrowser Plugin for phonegap here is the link-
https://github.com/purplecabbage/phonegap-plugins/tree/master/iPhone/ChildBrowser
this will help you to call child native uiwebview in your application(only for iphone), so you can easily enjoy pinch zoom feature, even the app scrollbar does not get disable,
it works fine!