A few questions here:
Is there anyway to keep iOS from freezing javascript on the page while scrolling?
Does iOS freeze javascript when your in another tab or if you switch apps?
Are there any other major javascript limitations on iOS?
iOS 6.x suspends all event timers in response to touch events like scrolling and has a tendency not to start up all the timers again once the event is done. It's a well known iOS 6 bug that is super-annoying. It pretty much breaks parallax and stuff. Some people have resorted to building their own scroll functionality.
Here's another StackOverflow on the same topic:
iOS 6 safari, setInterval doesn't get fired
and another:
setInterval pauses in iphone/ipad (mobile Safari) during scrolling
and here is the closest thing you'll get to a bug report on it (Apple doesn't make bug reports public to maintain the illusion of perfection, so developers made their own bug site): http://openradar.appspot.com/12756410
This bit of code will unfreeze timers that are broken / lost / destroyed by iOS during a page scroll: https://gist.github.com/ronkorving/3755461
This is another attempt to fix the freeze: iOS 6 js events function not called if has setTimeout in it
Unfortunately, there is nothing you can do to fire events WHILE page scrolling. Like fade out a back-to-top link when scrolling up the page. When it comes to scrolling, iOS6 is incapable of rubbing it's tummy and patting it's head. (iOS5 works fine, btw. This is a regression)
To answer the third question, a decent-sized limitation is that sometimes innerHTML just plain doesn't work. From the accepted answer:
It happens when the CPU of the phone is very busy (say 100%). Then the rendering engine sometimes forget about innerHTML settings.
The solution included in my unify project is to test if there is an element in childNodes, otherwise apply it again.
Related
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()
If I understand correctly, Chrome mobile stops JS code execution while scrolling in order to improve scrolling performance. I was wondering if it is possible to have my code keep running while scrolling?
Most mobile browsers just don't fire the onscroll event while scrolling.
There doesn't seem to be a generic solution to it either.
You can check this blog article with some test examples.
On desktop browsers, window.scroll fires off continuously as the browser is scrolled. However, in my testing on iOS and Android Chrome, it only fires when the scrolling has finished.
I tried touchmove but that had the same behavior - only firing when the movement finished.
Is there an event on mobile devices that fires continuously, like a desktop browser?
Apparently there's no way to get passed it because the "iOS devices freeze the DOM manipulation during the scroll event"!
Take a look at this link the scroll start section! http://demos.jquerymobile.com/1.0/docs/api/events.html
Might want to take a look at this site:
http://andyshora.com/mobile-scroll-event-problems.html
It helps explains why your going to be banging you head against a wall.
I have a webapp for ios. I wanted to implement the so-called 'fast click button' detailed such as:
http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone
https://developers.google.com/mobile/articles/fast_buttons
but I see from other posts that in ios5 we can get access to the UIScrollView belonging to a UIWebView so that we can remove the click delays. We can do this via:
UIwebView links delay
[webView.scrollView setDelaysContentTouches:NO]
Is this the recommended approach now? This seems a lot simpler since I am only targeting ios.
Thanks
From what I can tell, setDelaysContentTouches doesn't eliminate the 300ms delay. At least, it didn't in my testing. However, the javascript solution to linked to did work for me.
When I long press or scroll on the screen of an Android or iOS device, the Javascript running in the webview pauses. How can I keep js running, and additionally, why does js pause in this case?
This post has a similar question/answer, I believe it is purely a performance optimisation, as scrolling will require the browser to redraw/paint the DOM: This will take alot of resources. In regards to the long press, this may be related to the browser waiting to understand what the wants to do next, i.e. selecting an area to copy/paste or triggering the browsers context menu.