This is something that is bugging me a lot. I see a lot of hybrid apps made in HTML5/JS that present this problem. To date, I havent found a reliable solution.
The problem is that, in mobile, with the regular and more used angular event: (click), as so:
<button (click)="dosomething()"></button>
There are 2 major problems:
When you press on it, and you do a long press, it will never, ever call the click action. If you havent defined or coded a long press, this a very very very very very bad UI behaviour. The "tap" is, therefore, badly implemented. If you go to your android calculator, you'll see that when you press a number, and wait 5 seconds, when you release, it will trigger. Which is how it should work.
If you press it and move slightly, the action will not trigger. This is also something that is quite bad for UX purposes.
Does anyone know a solution to this or an alternative?
Related
I am looking for answer hours already and couldn't find any good solution: I am using react js and redux and trying to solve this issue mostly for Chrome.
Component which is observing one of redux state, contains Input field and whenever I set in redux focusInput: true I am calling function with following code:
inputRef.current.focus()
It works on Android phone. Input field gets focused and keyboard pops up, but couldn't make it work for IPhone.
Found many articles around this topic but all seems like ugly workaround... one of example is on this article .
Is there any good api for Mobile virtual keyboard or solution?
I have some problem with catching right click event on my web app, tried to use window.oncontextmenu, but for some reasons unknown to me it is not work on Tizen. But when I debug my app via desctop browser, everything work as it should.
What I need to do to activate right click event handler on Samsung TV Tizen?
in general I have lowered my expectations in regards to what will work with the browser running on Tizen displays.
Anyway, a few things that may help you:
Firstly there are oftentimes issues with privileges on Tizen, it's possible that is a problem for you. You can check the privileges available to you for any related to mouse input.
Also I was able to find:
<feature name="http://www.samsungdforum.com/feature/Mouse"/>
Sadly it seems no one really knows what this is or what it does, as the documentation is very poor.
Since you are testing using your device I suspect you have also tested left click. Presumably if that is working it is likely not a privilege issue. In this case I suggest trying a different approach, as I remember to have encountered trouble with events on SAMSUNG browsers as well in the past:
http://developer.samsung.com/tv/develop/guides/user-interaction/mouse
There is some info on setting up the onEvent callback properly.
Last but not least, instead of
window.oncontextmenu
try
document.oncontextmenu
My Angular 2 Application is slow to respond (1-5 seconds) to key input, button clicks, tabbing across inputs, etc. only when Chrome Developer Tools is open. Material 2 animations also become slow and choppy.
I've been developing this application for three months, and use Chrome DevTools every day. This issue cropped up seemingly overnight.
What I know:
I stashed all pending application changes to revert my application to a time when this was not a problem. The issue persisted.
Chrome DevTools doesn't seem to slow down any other application (ie. google inbox, google maps) in the same browser session.
Maddeningly, when I run the DevTools' Timeline "Record" to try to gain visibility into the issue, the issue disappears and the page reacts at normal speed again! I assume this is the best clue that I have, but I don't know the internal workings of DevTools well enough to know how "Timeline Record" changes things.
I've restarted Chrome and deleted all cached data.
Nothing of the sort happens in Firefox or IE when I open the Developer tools in those.
Any recommendations on where to look next would be greatly appreciated!
Final answer:
Remove all breakpoints
Even if they're not getting hit this fixed it for me and got performance back to normal.
May be a bigger issue if you have logging breakpoints - so try deleting those first if you're attached to your breakpoints.
Previous answers:
I came up with a workaround - although still not really figured out what is actually wrong.
I also discovered a bunch of tools I didn't even know existed that I'd skipped over before - they're under More tools.
Start by opening the Performance Monitor. This shows a nice CPU graph isolated for your Chrome tab - the Windows task manager is as useless as it ever was.
This is the behavior I got when choosing a date from mat-calendar. No other logic running - just selecting a date. I removed everything from app-component and just put a mat-calendar and it took ten seconds to change the date!
Other controls are generally fine. I could open dialogs, use combo boxes etc. and nice and fast. But selecting a date gave me this nonsense:
I tried emptying local storage, clearing cache, etc. and then I changed port number for my website. I simply changed dev.example.com:44300 to dev.example.com:44301 - in other words Chrome now thought it was a different website.
This is what it looked like after I switched port number.
I also got the same effect using a reverse proxy server - which put my local machine on the internet - so I could try to duplicate the issue from other machines. I could not.
So hope that helps someone - still no clue what's in the cache for this server that is having such a massive impact on performance. But for sure it's not just my code.
Here's a few other things to try:
Test with --aot flag
This didn't make a difference to me, but good to narrow things down.
Add some controls that don't do anything (as a control)
This way you can find if some specific action or control is causing the slow down. You should of course be able to toggle these instantly.
Just toggle them on and off, hide something.
<mat-radio-group>
<mat-radio-button [value]="false">
bloop
</mat-radio-button>
<mat-radio-button [value]="false">
bloop bloop
</mat-radio-button>
</mat-radio-group>
Enable Rendering debugging options
Make sure you aren't re-rendering the whole page constantly
The rendering option above will show this to some extent, but one thing I like to do is just add a random text box - type in it and if the text subsequently disappears you know that control has been rerendered.
<!-- yes, just a standard text box -->
<input type="text"/>
Just hide things with *ngIf="false"
Hide controls (yours and third party) and see if anything is causing problems.
For me I'm currently suspecting mat-calendar is causing issues - but I'm still thoroughly confused as to why enabling 'Record' makes the problem non existent.
I've fixed the issue, but I'll never know what was causing it. Likely a setting that I had accidentally changed.
I deleted the Chrome App and reinstalled, everything is back to normal. I'm going to leave this question open in case anyone else has this problem or wants to contribute.
It is normal for every web app to run slowly with Chrome dev tools opened.
Especially if you have inspect tab open, that it's like a new page opened in the same time + has animations on any block render.
We had this issue today at a colleagues workstation. Turned out that it was a chrome-extension (don't remember, something with "ghost" in its name). So maybe try out using guest-mode and check whether the issue still occurs. If it doesn't, successively reactivate the extensions to see which one is causing the problems. If it still occurs, follow the other proposed approaches.
I've seen multiple questions regarding how to check the presence of a back button in Android, but they all seem to be geared towards apps in Android, which I don't believe would help here.
I want to determine the need to show a back button in a webapp that will be run across multiple OS's, and I know with javascript you can check what OS the device is, which answers the need to show or not show a back button for iOS, or Windows Phone, but with Android, since there's many different button set ups, I would like to be able to check the presence of either a software back button (like an LG, OnePlus One or something) or a hardware back button you would see on most other devices with hardware buttons. I can't seem to find an answer in my searches, and if it's not possible, that's fine, I just want to ask and be sure. Again, any answers need to be relevant to javascript solutions. If there are any useful libraries or tools I can integrate in with the javascript, (i.e. something in angular, jquery, etc. then I'm happy to entertain those solutions as well).
I recently started uses Onsen-ui, and I am having a lot of fun with it.
I am using crosswalk for my Android application and this has gotten rid of almost every performance issue I've had. Pages scroll smoothly and everything is super responsive!
The only issue that remains is that there is a noticeable stutter between page changes. When I tap the button to go back (or to navigate forward to another page), the app will seem to 'pause' very briefly (similar to the 300ms click issue, but not the same because everything else is instantly responsive), then it will proceed to play the first one or two frames of the page transition animation, stutter again, and then complete the animation smoothly.
This is very jarring and really ruins the experience in an app where you navigate from page to page frequently!
I don't known what's causing the issue, but if I had to guess I would say that the first stutter is caused by AngularJs loading in the template data and the second is AngularJs actually processing the data once it is loaded (binding to all the properties - or whatever the correct term is! I'm new, forgive me :) ). Maybe the issue could be resolved by caching templates if angular supports such a thing?
Of course this is just a guess, love to hear if you guys had similar issues and would love a solution!
Note that this is tagged as Android + Crosswalk, but I don't mean to single out Android. The issue might be persistent in iOS too, but I don't have an iOS device to test on.