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.
Related
I use a custom PNG for the splash screen in my MAUI app. It works fine on all of the IOS emulators I run the app on. It works fine on the Android emulator it runs on. However, when I connect my physical Android device to my computer and deploy to it, the splash screen does not appear.
I've tried looking at the device log, but there are literally thousands of entries in there which make it problematic for troubleshooting. What are the recommended debugging or diagnostic steps I can realistically use to track this down?
EDIT:
I managed to grab the device log entries during the splash screen loading and thought I would paste them here to see if anyone can make any more sense of what's going on. Here's a color coded version of it that I formatted in Excel:
While testing my website's mobile version on several devices, I noticed a very strange behaviour.
I have a scrollable content div with overflow: auto, and this works properly on all tested devices, except iPhone 4 on Safari. Other browsers and devices display it correctly, even iPhone 5 Safari.
On iPhone 4 Safari, when you scroll to the end of the content, a lot of extra whitespace appears at the bottom (looks like 100-200% extra height) and the text disappears when scrolling. This doesn't happen on any other devices in Safari, nor does it happen in other browsers on iPhone 4.
Has anyone ever heard of such a phenomenon before? I have absolutely no clue what causes this behaviour or how to fix it.
Since I only have access to a limited amount of devices for testing, I may be overlooking other devices/browsers where this issue also occurs. If you have a mobile device and want to test it as well, the live site is here: Live site. On the mobile homepage, click one of the logo's to expand the content, then try scrolling down. Please post your results in a comment.
How it looks on iPhone 5 Safari when scrolled down (no issue): Image
How it looks on iPhone 4 Safari when scrolled down (issue): Image
I would venture to guess that you are exposing a layout quirk in Mobile Safari because of the way that you are hiding/showing the contents of each .company element. Each time that you change the display property of an element, the browser must perform a reflow. Reflows (also called layouts) are prohibitively expense on lower powered mobile devices. This would likely explain why you are only seeing the issue on an iPhone 4.
I myself tested on an iPhone 4 and iPhone 3GS, both running iOS 6.1.3, and I was able to reproduce the issue only when I expanded the top or bottom .company elements, but not the middle one. Perhaps this is because the middle .company element contains the fewer children, meaning fewer layout calculations are needed.
Instead of applying display: block; and display: none; to each of the children in the .company element, I would strongly recommend you simplify your javascript to instead toggle the display property on a single container element. By doing this, you force the browser to perform a reflow calculation only once, rather than for each element that you are individually changing the display property.
P.S.: The "other" browsers on an iPhone (i.e. Chrome and Opera) use UIWebviews. UIWebviews use a modified version of the Nitro Javascript engine (the Safari version has JIT compilation enabled). This subtle difference might explain why the issue can only be reproduced in Safari.
After playing around with your live site a bit using the Safari 6 remote debugging feature, I found a solutions that is working for me.
Add -webkit-overflow-scrolling: touch; to the .container element (the one that is the child of your #companies element).
After thinking about it some more, I remembered having issues with scrolling making content disappear randomly and adjusting the overflow-scrolling property fixed it for me.
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.
I build my Corona app for iPhone Simulator, and it running well. But if I installed my app on my device(iPad), and i have many issues(no scrollview and tabbar working) buttons is visible only.
How to solve the problem?
Look at what happens when you run it in the iPad simulator- Do you get any errors in the console if you check it while running the app on your iPad? If so this could shed some light on the issue. One possibility is a corrupted image, or an incorrect image format.
If only the buttons are visible it sounds like you app has an error that is preventing all of the display objects from loading. (Just based on the fact you mention your buttons display but nothing else.)
I have created several web apps for iOS that employ the apple-touch-icon-precomposed link attribute method for custom home screen icons without the gloss. However, I have run into an issue recently, where, after adding the home screen bookmark and then running the app and exiting the app (via multitasking), gloss is applied to the icon! I don't understand why this happens. I can't reproduce it on an iPad 2, but this keeps happening on my iPhone 3GS running 4.3.3. Also, it seems that it might have something to do with putting it in a folder?
The app is located at http://pattern86.com/apps/color if you'd like to inspect the code.
Basically this is what happens:
Add the app to the home screen. (No gloss--everything's good at this point.)
Quit the app from multitasking (It already shows the gloss here!)
Now the icon has the gloss effect! What gives?
(reposting as an answer, as requested:)
Could be something to do with the icon itself. Does the image have an alpha channel? Do your other, working, apps’?