iOS 9.3.2
Phonegap Build 6.1
We're loading an iFrame from another vendor into our iOS app. The form loads perfectly fine. We tap on the form field and it does not allow any inputs. This occurs on multiple iPhones. The same app works on mobile safari and chrome. Phonegap is when these issues begin.
We've made changes to the CSS for
-webkit-user-select: none;
now everything is
input { -webkit-user-select: text; }
We've disabled faskclick.js and made the changes suggested, still the same thing.
Not sure what could be causing the problem. Any guidance would be appreciated.
According to Shazron and risingj at Adobe, this is likely an Apple rendering issue in UIWebView. They have no control regarding UIWebView's bugs, so this is something everyone should take into consideration. We've downgrade to cordova 3.7.0 and use "cordova-plugin-wkwebview", it works as intended.
Related
We have a website that when you click on the text it reads to you what is displayed. This works 100% for computers but on mobile devices it will not play the audio.
I have looked around the web but everything is pointing to Jquery using touchstart. We tried doing this but it then breaks on computers.
Anyone run into issues like this? If so, how did you fix it?
I think this was an issue with older versions of react. I haven't had the problem recently. In the past, I solved it by adding cursor: pointer; to the CSS of the element. It had something to do with events not firing on elements that aren't usually 'clickable'.
I am developing a web application for mobile where I am using jquery file up-loader plugin. from here
it works great on mobile Chrome and Mozilla. But don't work on default android browser. I want to hide the input where it does not support the plugin. I tried Google, no luck. Can anyone tell how to identify chunk support for the browser?
Try the following:
if(jQuery.fileupload())
{
//hide input code here
}
Can anyone help me figure out why this page causes Android browsers to crash?
http://thewellcommunity.org
All sub-pages seem to work just fine, but when I load the home page on an Android, the browser app just closes without any warning or error messages. I've tried this on 3 Android phones and on a Kindle Fire.
When I completely disable JavaScript in the browser on the phone, the page loads successfully. Unfortunately this is a live website, so I'd prefer to save disabling chunks of JavaScript on the server side as a last resort.
On a side note, Opera Mini, Opera Mobile and Firefox on an Android phone do not crash, but Dolphin, Miren and the stock browser do.
UPDATE: It appears that I spoke too soon when I said this was fixed. I was able to reduce how often the browser crashes, but it still does occasionally crash when the page is loaded. :(
UPDATE #2: It now appears that the crash may be CSS related. After spending weeks enabling and disabling various JavaScript snippits, I tried disabling the stylesheet, and now I can't get it to crash.
Anyone know of an Android CSS bug that might be causing this? My guess is that it's related to some CSS that only gets accessed after the JavaScript does it's work.
I found the culprit... It appears that a css font-family rule was to blame. Although, I'm not sure why since the same font stack is used several other places on the site. :\
Here's the line that caused the problem...
.Site-Search .Buttons input
{
...
font-family: TeXGyreHerosRegular, Arial, "Helvetica Neue", Helvetica, sans-serif;
...
}
For whatever reason that line caused all stock Android browsers to crash. Weird.
Check out Weinre. An explanation can be seen in this youtube movie.
That way you can debug the Android webkit browser just like the well known Firebug.
In Eclipse's emulator (2.3) it loads fine but has some layout flaws.
If anyone came here looking for a possible reason why all of their mobile's different browsers crash after a several seconds when loading a particular website it may be due to the version of jQuery employed.
For example, the LG-p690f and HTC Incredible S are some of several Android 2.3.x phones known to have troubles with fade transitions in jQuery 1.8.1 and 1.8.2 due to a browser javascript bug that will cause jQuery's Animation function to fail at this line:
percent = 1 - ( remaining / animation.duration || 0 )
If you are the owner of the website you can try upgrading to 1.8.3 (or downgrading to 1.7.x if allowed). Otherwise, you can send an e-mail to the website.
Sources:
http://bugs.jquery.com/ticket/12497
https://github.com/jquery/jquery/pull/1019
I am developing an Application using Phonegap on Android. Everything works fine on OS 2.1 but on OS 2.2 when we click on any input type text field the keyboard appears and whole window moves to UP side and the input type field becomes invisible. Can anybody tell me what exactly be the problem and can it be solved using javascript? How to stop windows resizing functionality on Android 2.2?
I found the same problem on Text Input on android phone is not in view when the keyboard for webview comes up? also, but not the solution.
Adding this
android:windowSoftInputMode="adjustPan"
to your in AndroidManifest.xml will solve the issue
I tried to put following css property and it was working for me on Android 2.2
html, body{overflow: hidden;}
Not sure why it is working, but it is working...
Note: I used "iScroll" plugin for scrolling in my application.
I've never used PhoneGap but I went to their site and I am to understand that it still works via Eclipse and the ADT; if that's the case then this problem can be solved via the AndroidManifest.xml file by adding the following to your <activity> tag for the activity that is invoking the Soft Keyboard:
<activity android:windowSoftInputMode="adjustNothing"
//other flags
/>
Actually this seems to not be the case. The API document I was reading was actually for Honeycomb, this flag isn't in 2.2. Sorry. All of my work recently has been on tablets and I forgot which version of the SDK I had bookmarked for reading since I've been prepping lately.
You might have to enable this script to avoid your app scrolling when your text input field gets focus :)
function preventBehavior(e)
{
e.preventDefault();
};document.addEventListener("touchmove", preventBehavior, false);
this behaviour on android 2.2 append when there is one element in page with a "transform" css attribute (like transform: translate3d(0px, 0px, 0px); )
removing those declarations fixed the problem for me.
(overflow:hidden also but you can't scroll the app anymore)
PS: overridding the declarations does not work unfortunatly
I have a jQuery script I'm using on a site to allow fixed position background images on iPhone/iPad/iPod. However it seems to be clashing with another script I am using on the site that enlarges background images full screen. Luckily they're independent of each other, I don't need the clashing background image script to work on iOS devices and vice versa.
Is there a way I can specifically target IOS devices to serve a JS file? I initially thought about using some kind of IF statement and doing it on window size but that started to get a bit complicated and affects other non-IOS devices. It just needs to run something like this...
..."if IOS device then load scroll.js"
I know device/browser sniffing is frowned upon but I can't think of another way around this problem.
You can use the Mobile Safari user agent string to detect mobile safari server-side, see: How do I detect Mobile Safari server side using PHP?
You can also do this in JavaScript:
if(navigator.userAgent.match(/(iPhone|iPod|iPad)/i))
See iPhone & iPod Detection Using JavaScript for more information.
You can use Detect Mobile Browser (it has a library for javascript).
you can also try this
if (navigator.userAgent.match(/like Mac OS X/i)) {
alert('Hi, you\'re browsing from an iOS device.');
}