I am creating scripted e-books running under iBooks. They do animations using JS setTimeout and/or requestAnimationFrame. After extensive debugging of why animations were running so slowly, I found that the timer was firing, instead of in the 20-50ms that I requested (and get in Chrome or Safari on the desktop), at intervals more than 10 times that long, sometimes as long as one second or more (this is setTimeout, since apparently requestAnimationFrame / webkitRequestAnimationFrame are not available in iOS or at least in the iBooks-ized version of webkit).
After doing further research, I found out this this is apparently not an iBooks issue as much as an iPad issue--I find similar granularity in Safari on the iPad. Is this just a function of a slow processor (I'm testing on an iPad 2), as discussed here?
Or is this related to setTimeout being reported to not function during scrolling as discussed here (although in my case there is no scrolling involved)?
For your information, the types of animations I am doing are not ones that can be implemented using CSS animations which would potentially be hardware-accelerated.
Bottom line, does anyone have any ideas how to get finer timer granularity in JS on the iPad, whether in iBooks or Safari?
I have found the problem was that iBooks reads through the entire book when it is first opened, opening (and running scripts on) each and every page. Furthermore, it does not appear to correctly prioritize requests from the currently open page over its background page pre-reading work, so until the pre-reading process is finished, which could take dozens of seconds on a large, script-heavy book, timer responsiveness (whether setTimeout or requestAnimationFrame) on the current page can be dramatically impacted for the worse.
Related
There is a problem with the sprite animation on the homepage of one of my clients, but it only appears when the site is viewed on an iOS device, namely an iPhone or iPad. I can't replicate the problem on any other device or emulator, so I'm having an issue troubleshooting it (don't own an iPhone or iPad). The problem is: what looks to be a 1px line is appearing on the right edge of the animation frame pretty much all the time, and a similar line flickers occasionally at the top of the frame as the animation runs. The animation itself is a simple javascript sprite sheet animation. I'm operating under the assumption that I have the sprite animation programmed correctly since it appears correctly on every other device, platform and browser I've checked. It even works in IE.
Two questions:
What would cause a simple sprite animation to display differently when rendered by iOS?
As a small business consultant, I don't have the time and my clients don't have the budget for me to physically test on every single device, so I have to rely on emulators. What other options do I have if the emulators don't properly demonstrate what the device will display?
I'm not entirely sure of the protocol regarding posting a link to my client's production website, but happy to send a link to anyone willing to help that responds and/or messages me.
welcome to SO.
I spend a lot of time working specifically with iOS on the web and have run into similar situations. Without tweaking an example you post I won't be able to prove it exactly, but this should at least give you direction.
Flickering or semi opaque lines are often caused by the scaling set to the asset. In the world of high DPI displays and fluid layouts, there are differences in rounding that result in fine lines, shimmers, et al. Is there any scaling set on the assets, e.g. background-size, downsampling?
The emulators are displaying the software correctly - these issues are a result of hardware. Best thing you can do is buy a flagship for all of the platforms you test on, or look into local resources like Clearleft's Device Testing Lab
I'm facing some problems when browsing trough our webshop using an UIWebview. It just freezes the entire app until loaded (which can take up to 15 seconds). After fast clicking to other categories my app stops responding to touches, but it seems memory and CPU stay stable (30-40mb and CPU stays very low).
I'm using multiple UIWebviews within a UITabbar controller. Anyone an idea what causes this problem? I seem to find multiple questions related to mine, but none solutions given which will also work for me.
I faced the same problem and found out it was caused by an Ajax script on my webpage which took to long. The UIWebview is not a great thing to use, but when the pages are stable, use not to many javascripts, it should work without facing high CPU.
So, take a look at your page, look at the javascript/ajax/jquery and let me know the result!
I'm moderately experienced with iOS, but I'm using UIWebView for the first time on this project.
I'm wondering, is there a way to monitor the line-by-line, internal operations of a UIWebView in Xcode? Maybe drop some NSLogs in there, or some breakpoints? The delegate methods cover the pre- and post-load stuff, but there doesn't seem to be any interface to actually track what the WebView itself does when it loads a page.
Specifically, I'd like to be able to track the app's behavior as each image from a webpage is downloaded and stored. I'm getting some weird errors around an image being unusable on iOS 7, but my PHP/JavaScript swears that everything is fine on its end, and the image seems fine on desktops and on iOS 6. I'm increasingly certain that the problem has to do with the WebView itself, (an answer to a related question seems to suggest it could be about WebKit calls on different threads), and I'd love to breakpoint my way through, or NSLog some key points or something, just to rule some stuff out.
Is anything like this possible? Or is UIWebView a private party that you can only hear about once it's over?
Does it break in Mobile Safari or only in your app?
You can point Safari's web inspector on OS X at Mobile Safari running in the iOS simulator or even on an iOS device (it has to be enabled in settings).
This will allow you to view all the HTTP headers and so on.
Another option is to use something like wireshark to monitor TCP traffic, but that's a lot more complicated.
http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/
I've built a scroller prototype using WebGL. The problem is, when it's combined with other non-WebGL elements on the same page, the scroller becomes jittery and the quality is quite poor. You can see a demo here (scroller is at the bottom, ignore the Chinese characters) - http://viewer-test.appspot.com/Viewer.html?type=presentation&id=6a169bb8-e440-4338-9e3a-8b5e429f32ee&showui=false Even if I take out the video, the scroller still slows when the CPU spikes every time that RSS feed top right shows a new feed snippet.
I had considered using Web Workers to run the scroller on a different thread, but came across another post in this forum that said that Web Workers can't be used with WebGL. What are my other options to ensure smooth scrolling?
Thx.
Are you using RequestAnimationFrame for your animation callbacks? If not, you should. It's managed by the browser to time the draw of your element with the others on the page and with the system screen sync, so you get the smoothest presentation possible. If you do your animation using setTimeout or setInterval, you'll almost always end up out of sync with the pages rendering, which leads to dropped frames and stutters.
Does anyone know if the iPad has any limitations on the canvas tag?
Currently I'm working on a creative that uses a flipbook and audio tag combination to simulate inline video content. The animations are drawn to the canvas element and synced with the audio content being played. There are 4 short video clips that get played when someone clicks on the four buttons below.
http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungfupanda2_test/
The problem I'm having though is in iPad. After playing a few animations, mobile safari just suddenly crashes. It never happens when I play it on my iPhone but it happens every time on the iPad. Its not one particular animation either because if I click a different combination of buttons, the previous clip that it crashed on plays fine, and then it decides to crash on another clip.
I think the problem might have to do with the amount of memory Safari gives individual page views. I found a blog post that explains that problem pretty well.
http://roblaplaca.com/blog/2010/05/05/ipad-safari-image-limit-workaround/
According to that post, once mobile Safari reaches a particular threshold of memory, images begin to return blank. This is consistant with my finds so far. The iPad that I'm testing this all on is running iOS 3.2.1 (and before anyone tells me that I should just explain to my boss that nobody uses 3.X anymore, I tried... they still want me to investigate this). I borrowed a co-workers iPad running iOS 4.2.1 and that device didn't crash, but some of the images weren't being drawn to the canvas.
I'm pretty sure its a problem with the canvas tag too, because I tried experimenting with running the animation without drawing anything to the canvas element, and the page never crashed.
Thats why I think maybe its a limitation with Safari's support of the canvas tag. Of course, I'm open to anybody else's suggestions.
Feels kinda weird answering my own question again, buuuut I figured if anyone did a search on this kind of question, an answer would be helpful.
I believe my original hypothesis was correct. The total amount of images that the aniamtions were using was around 600+. I think the older iPad loaded as many as it could and then when it ran out of cache and the canvas tag was trying to draw images that weren't really there anymore, it crashed.
Eventually we ended up serving the ad to devices with iOS 4.2 and higher, since the problem didn't seem to occur on those newer devices. Plus, we compressed the image sizes further, so that helped reduce the amount of images we were storing into memory.
If anybody knows approximately what the cache threshold in iOS 4.2 or higher browsers are, I'd appreciate it if you commented. Just want to get an idea of how many KB of image data I can safely load.