I had previously asked a question about my test project.
The dropdown which is most likely using boostrap.min.js works only in Android currently. We've changed the location of the folders so that the linked boostrap js is now like this: <script type="text/javascript" src="../js/bootstrap.min.js"></script>. Notice the ../ part was added. There are no problems reading the file on non-IOS based devices. When we check on the Iphone, the dropdown doesn't work. So I thought maybe its how Safari reads the CSS or Javascript?
Here is the site btw: http://star-allianz.com/en/en/index.html
I don't own an Iphone5 or Iphone6+ so its hard for me to test things.
Note: The missing files aren't a problem because the dropdowns still work in my Android phone.
PS: I've tried using online IOS device simulators and the built-in Google Chrome simulator. The dropdowns work even when I load the site. However, when using a real IOS device, they don't. Keep in mind, it works in Android. Also, I've never made any changes to bootstrap.min.js.
Related
We have a phonegap/ionic application targeting iOS. We have been testing with the ipad air simulator (xcode) and ipad air (10.3.3), ipad Pro (11.0.3).
The app is an ionic (v1) app that downloads and loads stand alone html files (the files contain css, html, js in one doc). The documents are typically long forms. In all test environments we are getting odd behavior with selects/drop downs.
When you click/tap on a select the options will appear correctly.
Then when you click/tap somewhere else, blank space or another input field you will usually get the select options bubble again but it will be empty.
In the above image I made my selection from the options and then clicked into the next field.
This was intermittent at first and now it seems to happen all the time. It seems like it has something to do with losing focus but I am unable to see why this is popping back up. I haven't found anything very useful from searching online in regards to this problem.
UPDATE 11/7/17
After more thorough searching this seems to be due to building the app with xcode 9 and/or the use of UIWebView vs WKWebview. I also looked through the code more to see we were already using WKWebView not UIWebView and the problem is still present. As someone mentioned in this thread.
Good thing is Cordova has support for WKWebView too. You have to install the plugin: cordova-plugin-wkwebview-engine
UPDATE #2
So we found out how to debug our application utilizing the safari debugger. For those of you interested, here's the link on how to do this:
http://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/
Using this, we figured out that our issue was actually related to CSS that we were using in our code. In our body class, we had the attribute "overflow-y: auto". Upon deletion of this line of code, everything worked again in mobile safari.
~~~~~~~~~~~~~~~~
UPDATE: Upon further testing. It looks like if I go to the web version of this application (hosted on our server) from the safari app on our iPad, this bug still happens. If I do the same on the mac version of safari though, then this bug does NOT happen. Hopefully this information might be helpful.
~~~~~~~~~~~~~~~~
So we have a javascript hybrid application that's compiled using the trigger.io toolkit. Jquery, backbone.js, and marionette.js are use in this project. We just started testing on iOS devices.
Everything works fine on both the web / android versions of this app, but on iOS (both simulator and device), the following bug is occurring:
Upon loading up the application, on the first view, when you first tap into a text field the application freezes briefly. After the application unfreezes, the following error code is output into the trigger.io console:
_BSMachError: (os/kern) invalid capability (20)
_BSMachError: (os/kern) invalid name (15)
Everything looks fine, but then if you type more than one letter into the textfield, the entire application disappears except for the background view. You can tap out of the text field, and everything returns into view, but obviously this is something customers shouldn't be experiencing.
I've researched a bit, and some suggestions have said to try and edit the info.plist file. I've looked everywhere, but I can't seem to find this file. It's seeming like trigger.io hides this from the developer somehow.
Does anybody have any ideas as to what might be causing this issue or how to fix it?
Thanks!
So we found out how to debug our application utilizing the safari debugger. For those of you interested, here's the link on how to do this:
http://appletoolbox.com/2014/05/use-web-inspector-debug-mobile-safari/
Using this, we figured out that our issue was actually related to CSS that we were using in our code. In our body class, we had the attribute "overflow-y: auto". Upon deletion of this line of code, everything worked again in mobile safari.
Got a strange one, the app runs fine in the browser, but when on an android device none of the page transitions work. I have checked in logcat and I can see the address changing to include the hashtag however the other page never loads.
I am using multipages so I have like 3-4 jqm pages within 1 html page and depending on button presses it moves to another one. I have tried disabling ajaxEnabled, I have tried using javascript to changePage($("#some-page")); none of it seems to work.
The crazy thing is it works fine in the browser, I have tried in FF, Chrome, Chrome with Ripple Emulator and there are no problems changing pages via href="#some-page" data-ajax="false" or using the changePage method, both work fine.
There are also no errors, as I have tried using the Weinre debugger (which rarely tells me of errors) and the adb logcat and both are clear, no problems from what I can tell. (I had to use adb logcat to debug initial JS errors as the Weinre one didnt list them).
I am using:
JQM 1.4.0 RC 1
Phonegap build (profile 2.9.0)
Android 2.3
Anyway I have googled and checked over and everything that has been suggested I have tried... so any new suggestions? :)
I have had a friend try it on his tablet which is running 4.* and it works as expected on his... not sure what that proves...
As no one else has answered I could not get to the bottom of the issue, it seems to be something to do with android 2.3 as it works fine in all 4.* versions.
I will relinquish the answer to someone who can give a technical reason as to why it does not work but for the moment I will mark this as complete.
I am working on a website and the homepage is very javascript/jQuery heavy. Because of this there are all sorts of issues on mobile devices when loading the page. Mobile Safari crashes and on other devices the page freezes completely.
I would like to know if it is possible to disable an external javascript file, if the website detects that you are using a mobile device.
You have two main choices:
At the beginning of the external javascript file, check what kind of device you're on and skip executing the rest of the file if desired.
Don't statically load the javascript file. Instead, check what kind of device and then dynamically load the JS file if not on a mobile device.
That said, what you really ought to do is fix your javascript because there's no reason you can't have javascript that works on both desktop and mobile devices. If mobile Safari is crashing that's because you have issues in your JS that you should fix, not because you can't run JS on mobile Safari.
Thank you for the response, I will probably try option 1. The problem is that it is using a parallax scrolling effect via Stellar.js which I have heard does not work well with mobile browsers since scrolling works differently.
I have a site that uses javascript to launch a css overlay of a google map (see [link deleted because I can only have one at a time] and click the 'Enlarge' button under the map).
This doesn't work on the ipad. I believe it has something to do with this not being a link, but using the jquery live('click',.. approach. I need to fix this but I'm new to using the ipad and I don't even know how to step through the javascript to see what the problem is.
What kind of development tools are available for testing on the ipad?
Edit: My mistake. The link above works fine in the iPad - no problem bringing up the larger map. However the sister site http://lowes-realty.com/Stateline-Plaza_Enfield_CT-11.aspx is not working. What I need is a development system that will let me look at them both on the ipad (I really want to avoid emulating or spoofing).
Have you tried firebug lite?
http://getfirebug.com/firebuglite#Install
Have you tested this in google chrome? As google chrome is a webkit browser, you may be able to do the majority of your debugging in chrome, and iron out smaller issues on the iPad itself.
Edit:
Removed unnecessary comment about iPad.
The problem ended up being that I had a javascript error that aborted the script before I ever got to the jQuery code. Once I fixed that, I was able to use jQuery without making any special modifications for the ipad - awesome! I did not have to do anything with the swipe or tap events (sweet!).
However I was not able to get any kind of javascript debugger; I had to work this one out for myself. As of Nov '09 firebug lite crashed the ipad for me and there don't seem to be any developer tools build for testing the ipad. I tried several sites that claimed to perform the same way the ipad does in your browser and not one of them held water.
I have no reason to believe that there is a good option for debugging a site on an ipad (yet).
Edit A Year Later... I'm still looking for a good way to develop on an iPad. I just got Adobe Shadow up and running - it's not actually a useful tool, but there is potential (http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow). Right now (3-29-12) the code inspector is essentially non-functional (cannot view inherited styles, can't view elements without expanding the DOM from the body element, no javascript debugging, and much more).
I know that sounds hopeless, but it has one thing going for it that nothing else I'm aware of does: Shadow works with all existing mobile devices and its code inspector is independent of device and browser. So although the inspector sucks spectacularly right now, once they build some functionality into it Shadow could be a good solution. From their site:
Shadow will be updated regularly to stay ahead of web standards, web
browser updates and support for new mobile devices entering the
market, while incorporating user feedback to provide the best
functionality and experience possible.
~ http://labs.adobe.com/technologies/shadow/
I think the problem is that on the iPhone / iPad there are no clicks events generated but instead touch events (swipe, tap).
You can use something like jQTouch (you can start reading here Getting started and then proceed to callback events hint: tap==click).
If you have more to adapt you can also look at (and wait for a stable release) of jQuery Mobile
weinre lets you remotely attach a WebKit inspector (the built-in Dev Tools you use on desktop browsers) to a page running on your mobile device (iPad/iPhone/iPod/Android/BlackBerry 6/webOS) over WiFi.
http://phonegap.github.com/weinre/images/weinre-demo.jpg
JavaScript debugging is limited to console.logs, but it's better than nothing.
If you have an ICS device, Chrome Mobile lets you remotely attach a full-featured Inspector (with full JS debugging/breakpoints) over USB. I've been thoroughly thrilled using this tool with my Galaxy Nexus.
(source: google.com)