This is a site I've been helping with some work on. As you can see, the red left/right arrows go through the main sections of the site. All works fine on the major modern browsers, and was working fine on iOS 6.
However, on iOS 7, things get very strange. The page-to-page navigation animation basically never stops. (I've checked it in Safari, Chrome and Mercury browsers on iOS 7 (on iPhone 4) and it displays the same behaviour in all of them.)
My narrower question is: How do I fix this?
My broader question is: what changes have been introduced in iOS 7 that would make this happen? Is there some change in the way that JavaScript is being rendered that would cause this to happen?
Any help much appreciated. Thanks.
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()
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 am working on a mobile site, my first, and I am facing strange problems. I have created a custom jQuery slider with left and right buttons. I have tried it on my Android's own browser, Firefox and Chrome for Android. It works fine, as it is supposed to.
When I gave the work to my client he said it doesn't work on iPhone for which it is originaly intended. I was confused as how this is possible, as it worked flawlessly on my Android. So I asked my friend for his iPhone 4S with iOS7 and opened up the site. To my surprise, the slider did not work. I took out my phone and opened it on my Firefox, it worked!
Why is this so? If it is working on Android, shouldn't it be working on iOS too? And how can I solve it?
Regards
I came to know why this happens. By default, iOS Safari doesn't allow everything to be "clickable". This means you need to make it cursor: pointer via CSS to make it "clickable".
I have got my answer from here: This link tell is why this happens. Read it!
Regards
I am currently using the 3d cardflip method on my website and it is working perfectly in Firefox, IE, as well as the IE downgrades I have for older browsers. My issue is arising from the fact that it seems that all Apple iOS devices and Safari will not load the images and information on the cards on the initial load of the page but only when a hard reload or a simple reload of the page is performed. I have tried everything I can think of to fix the issue and I have not been able to find any information regarding the issue either. Any help would be gladly appreciated! The page that is not working is http://www.paytonandsam.com/about_sam.html
Please test this website on Safari Version 5.1.5, 6.0.2,6.0.3 i.e. a higher version of Safari browser. Because now safari browser is faster and flexible than the older version.
When I'm testing my website on a normal notebook, I have no problem with my website but when I'm testing this website on a Netbook (mini laptop) it has a strange behaviour.
You can see the website here:
http://www.benskesblog.com/projects/frontend/project/index.htm
(it works on IE9 and other modern browsers).
When I try it on my netbook the images aren't displayed completely. When I scroll I see another part of the images. Very strang. I've tested it on another netbook (and on other browsers) and I have the same problem. You can see it here:
http://img259.imageshack.us/img259/5168/titel1.jpg
http://img683.imageshack.us/img683/374/titel2k.jpg
Does someone now what's going on?
Thanks!
For starters, IE9 isn't "modern" - it's "bleeding edge".
Also, your page doesn't work at all in IE6 - which is arguably the most common browser out there.
So you've really got two questions you need to ask:
1) What is the minimum browser I'll support (for example, IE9+FF7+Safari5 #1024x768 truecolor resolution)?
2) How will I degrade gracefully for users who don't support my minimum requirements?