Odd dropdown/select behavior in phonegap on iOS - javascript

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

Related

UWP Javascript App - how to use the touch-keyboard when multiple monitors

I'm developing a UWP javascript app using an Aures touch screen device with a second monitor, something like this:
https://images-nitrosell-com.akamaized.net/product_images/14/3282/alt2-aures-nino-epos-system.jpg
The second monitor is integral to the app
The issue is this: Windows 10 will not go into 'tablet' mode while two monitors are connected, and if it's not in tablet mode, I have no way of forcing the tablet-based onscreen keyboard to pop up when inside an input field. I found this:
https://answers.microsoft.com/en-us/windows/forum/all/message-tablet-mode-isnt-available-while-your/9d6c7525-658b-4cb9-95ae-ec69f854f218
But that gives no resolution to the problem.
I thought I could change the app manually to be touch-based, force it to use touch, with the following code:
const ViewManagement = Windows.UI.ViewManagement;
const currentView = ViewManagement.UIViewSettings.getForCurrentView();
currentView.userInteractionMode = ViewManagement.UserInteractionMode.touch;
But it turns out currentView.userInteractionMode is a read-only field. That code does nothing.
If I can't get this to work, my only recourse will be to build into the app my own custom keyboard -- that's a last-resort though as far as I'm concerned.
I can't find any resources on how to programatically force the keyboard open either. Really pulling a blank here.
I managed to find an answer
https://www.tenforums.com/tutorials/83312-turn-off-automatically-show-touch-keyboard-windows-10-a.html
These directions are for enabling the onscreen keyboard as if the computer is in tablet mode, when it's not in tablet mode (I think it only has an effect when (a) you've got a touchscreen monitory and (b) you have no keyboard attached).
OPTION ONE didn't work for me because I couldn't find that setting.
OPTION TWO required a restart but works perfectly after that. In case that website goes down, I'll post option two here:
OPTION TWO gives you a file called Turn_ON_show_touch_keyboard_.reg
Windows Registry Editor Version 5.00
; Created by: Shawn Brink
; Created on: May 1st 2017
; Tutorial: https://www.tenforums.com/tutorials/83312-turn-off-automatically-show-touch-keyboard-windows-10-a.html
[HKEY_CURRENT_USER\Software\Microsoft\TabletTip\1.7]
"EnableDesktopModeAutoInvoke"=dword:00000001
And to disable it: Turn_OFF_show_touch_keyboard_.reg
Windows Registry Editor Version 5.00
; Created by: Shawn Brink
; Created on: May 1st 2017
; Tutorial: https://www.tenforums.com/tutorials/83312-turn-off-automatically-show-touch-keyboard-windows-10-a.html
[HKEY_CURRENT_USER\Software\Microsoft\TabletTip\1.7]
"EnableDesktopModeAutoInvoke"=dword:00000000
Just create Turn_ON_show_touch_keyboard_.reg on your desktop and double click it, then restart. Might want to restart with keyboard already unattached, not sure if starting the computer with keyboard attached messes anything up.

Screen video capture including mouse cursor on Mac?

I've been scratching my head for the past week and still cannot find a clear answer regarding this issue...
Basically, I'm building a desktop app for screen/desktop/window capturing using Web API's.
Seems that on Mac, mouse cursor does not appear in the stream. Please see https://bugs.chromium.org/p/chromium/issues/detail?id=238434 and
https://github.com/electron/electron/issues/8278
But somehow, a Chrome extension exists and works perfectly fine.
Can someone please explain how to successfully record screen using Web technologies to avoid ffmpeg and native scripts? How did those guys manage to overcome this issue on Mac? Does this issue actually exist?
Thanks.
It seems to be a bug where the cursor is not recorded when external displays are hooked to your device.
In my instance, I've got two monitors hooked to a Macbook Pro.
A workaround is unhooking your displays or setting your displays to mirror.
I haven't been able to test a set up with a Mac Pro or Mini hooked to just one or multiple displays.
I created an issue in the Chromium bug report.
This has been fixed since Chrome 56!

Typing in text field in iOS version of trigger.io app causes everything except background to disappear

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.

Unresponsive touch in android webview

I need to display four realtime smooth graphs representing user's biodata in my android application. I tried every free android library but they were not as smooth as their javascript counterparts. So I decided to use the highcharts js in webview.
Four graphs in the same screen works smoothly. But webview is not recognising touch events quickly. I tried playing with H/w accelartion, touch events etc. but it did not help.
Whenever I touch a button on the webview logcat says :-
"12-13 16:13:37.436: V/WebViewInputDispatcher(9308): blockWebkitDraw"
"12-13 16:13:37.441: V/WebViewInputDispatcher(9308): blockWebkitDraw lockedfalse"
After touching buttons multiple times it says :-
"12-13 16:13:37.806: V/WebViewInputDispatcher(9308): blockWebkitDraw lockedtrue"
So basically any touch on highcharts graph or the buttons does not work quickly. I am loading html/js/css from assets folder.
What fixes I need to perform in webview to resolve this? I don't think there is any problem with my html/js/css code because it runs perfectly fine on Chrome mobile.
Having your app an important delay is a possible indicator that probably you're doing some hard work in the UIThread that you should probably sepparate in a Thread or an AsyncTask.
You don't mention what is supposed to happen when you touch a chart, but some code would probably clarify that.
I strongly recommend installing Eclipse Memory Analyzer Tool (assuming you use Eclipse, otherwise you should find a similar tool for the environment you use) and combine it's usage with DDMS. This will give you some clues of where the bottleneck might be.
This is a good tutorial on how to use them: http://therockncoder.blogspot.com.es/2012/09/fixing-android-memory-leak.html
This one's very clarifying too: http://eclipsesource.com/blogs/2013/01/21/10-tips-for-using-the-eclipse-memory-analyzer/

'Firebug' for iPad

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)

Categories