I am developing an application that needs to detect the touch(or called tap) event precisely and fastly using Vue.
However, I found that for all of my iOS devices, tapping really fast causes missing tap as shown in the gifs that provided below (even wrongly last touch event is triggered for my iPhone 13 mini, no idea why).
CodeSandbox is also provided below and you guys can try it on your own iOS devices.
Anyone have a solution on it? Great Thanks!
CodeSandBox: https://7l45pm.csb.app/
iPhone 13 mini with iOS version 15.1.1
iPhone 12 Pro with iOS version 14.4
P.S.
My android 12 pixel 4a didn’t get this problem
I tested on both Chrome and Safari browser on my iOS devices, both occuring this problem
I tried cursor: pointer css, changed to use native button DOM, ways to eliminate 300ms delay on click events in mobile Safari, but no one get luck.
Related
I have a front-end component for a project that's exhibiting the following bug:
There's a button at the bottom of the screen of one of my Panes and ONLY on chrome on iOS does the button not show. If I tap the address bar, then the button appears presumably because the pane has redrawn itself.
The other problem is that I can't recreate the bug. It only appears on a client's web app. Things that could be super helpful:
what's a good way to inspect Chrome on iOS? (I know how to inspect Safari on iOS, Chrome on Android, but not Chrome on iOS. I've also already tried the devtools mobile emulator and it does not reproduce there)
any related posts for bugs on Chrome on iOS (I've done some search already but if anyone has something deep in the internet that they remember)
any knowledge of how Chrome renders things differently than Safari for iPhones
any ideas on intermediate solutions
any ideas on potential causes
I have developed an app using HTML5 and CREATEJS. I am encountering some issues that I cannot find a solution, for weeks. I hope someone can help.
1)On Android Google Chrome there is a problem that appears when I simply click anywhere on the screen: the FPS drops and any animation that is playing freezes for the duration of my touch. The problem is only in Mobile Chrome browser, on Android. It does not exist in other mobile browsers, neither in iPhone, neither in Safari, Firefox, etc.
I created a simple apk using webview and it doesn't have the problem either. So for some reason, the problem is only in mobile android chrome.
The code is optimized at maximum. 2 months ago we used only 1 canvas, but now we use multiple canvases and we have less animations in each canvas running everytime. While in android firefox it works perfect, but in android chrome it freezes for a single click.
I tried to disable stagemousedown/up events, because they are being triggered when I simply click anywhere in the stage. This didn't fix the problem or it is possible that there are some hidden stagetouch events that I don't know how to disable.
2)On Android Google Chrome and iPhone6 Safari, when I click the SPIN button, the game starts the SPIN, but with a delay of at least 1.5 seconds, but there is no such delay added with intention inside the code. On PC any browser, Android/iOS Mobile Firefox, this works perfect, no delay. In iOS Safari iPhone8 again it works perfect.
I created a simple apk using webview and it doesn't have this problem either. So for some reason, the problem is only in mobile android chrome.
UPDATE 11/10/19: Issue 2 has been solved by reducing canvas size and removing all shadow effects which consumed a lot of memory. Issue 1 still remains unsolved with absolutely no ideas left to try out. Any help is appreciated.
My project is 99% completed except these 2 issues. I am hoping to be able to fix them, because I really do not want to throw away months of work and switch to other javascript library for gaming, that doesn't have the problem, like PIXIJS.
I tried with RAF and RAF_SYNCHED, but still no improvement in any scenario.
Stage.update() is required for any animation. Having them on ticker is the reason why its getting slower.
To see the problem in action, please open this URL: http://www.nevergone.biz/DEMO_CODE/index.html
How to test: Open the link above in Android Google Chrome portrait mode and then click SPIN. During SPIN click above the game canvas or anywhere. Notice that everything freezes.
The code was extracted only for testing these issues, so after a few spins it may freeze. I will fix this tomorrow, but I hope someone can give some ideas for solving the problem.
Problem #1 is apparently isolated on some older devices that use Android Google Chrome. The problem is somehow caused by CREATEJS using too many listeners on the stagedown event. I am currently waiting for the developer of the framework to give an answer or for Chrome to receive a serious update.
Problem #2 was fixed by removing all text-shadow CSS effects which apparently were consuming a lot of memory.
cache might work.
var testShape=new createjs.Shape();
testShape.graphics.beginFill("red").rect(0,0,100,100);
testShape.cache(0,0,100,100);
stage.addChild(testShape);
// If you make changes and want to refresh the cache
testShape.updateCache()
I have been trying to google around for a few days to find some kind of answer, but is their a difference between how iOS mobile devices understand JavaScript, vs Android?
I currently have some code that works as expected on Android (Chrome/Edge), and on Windows (Chrome, Edge, IE 8). But once we get to iOS devices, it doesn't work as expected.
I also tried to see if I could find an emulator for iOS mobile, or just downloading the mobile Safari browser, but wasn't able to find one (that didn't have a cost related to it).
I found the issue, it was related to the selectors in the code not being completed - Chrome got it, but safari didn't.
I can't really paste reproduction here, because it's happening in commercial project. I will try to describe it and maybe someone had same problem.
Vue 2.x, iOS 9.x, iPad and iPod
My page (one of layouts) crashes on Safari/Chrome on iOS, immediatly after page load. On ipad it gets refreshed and works. On iPod it crashes also on other pages and doesn't get refreshed.
Can't debug anyhow. I know there was a problem with ios 9 safari with too much javascript templating/too much js at all.
Do you know anything about that issue? Is it possible to debug it somehow? I thought I just accidentaly trigger some bug in safari, but different behavior in faster/slower devices says it's more like computing bug (iPhone 6s work like ipad)
Help, I cant rewrite everything to jQuery now :D
EDIT:
I initialized vue on DOMContentLoaded and it fixed iPad problem (so problem was maybe conflicts between html rendering by vue and browser), but slow 2014 iPod breaks anyway
I'm testing jquery-mobile with Opera Mobile browser. There are bugs, which are visible on both Opera Mobile Emulator and Opera Mobile on mobile device. On both they are occuring randomly (often, but not always).
The most visible is with refreshing list with listview('refresh'); call. Sometimes the changes are not visible, and the pure HTML before the modifications is displayed. But after tapping the device the changes became visible.
And also, some clicks on buttons does not work. Most of the time it works, but sometimes the button need to be pressed a few times.
JQuery version is 1.6.4, jquery-mobile version is 1.0.
Did you find similar bugs, or know what is causing them and how to prevent them? I think that jQuery-mobile is using some unstandard behaviour, which is working on other browsers, but is causing bug under Opera, because most of the apps works fine, but some are causing problems only under Opera/Opera Mobile.