I have a webapp for iPod touch and iPad. Works like a charm on iPad 1 and iPad 2. Now I have tested on a new iPad (iPad 3, iPad HD whatever name to be used) and I see that the painting of the screen is slow. I can see kind of blocks being painted one by one.
Anyone knows how I can get the painting of the screen faster than iPad 1 and 2 instead of slower ?
EDIT: Bounty expiry
The bounty has at least given some answers, although they are not sufficient to award the bounty. The question remains open.
We had similar problem in our application, and tried some optimizations, here are the two most effective approaches:
Avoid using CSS3 effects. We used a lot of CSS3 shadows in previous versions, which slowed down rendering process on iPad 3 a lot. After replacing those shadow effects with background images, performance got greatly improved on iPad 3.
Optimize Javascript. Our application has some scrollable components, whenever user scrolls the component some Javascript code will be executed to do some loading work, like loading images in a lazy way. On iPad 3 scrolling will delay for 500ms when user tries to scroll from one page to the next. Then we found some unnecessary image loading work were performed in the scrolling callback, after removing them, the scrolling performance is acceptable.
These two approaches may be quite specific to our application. Hope they can help you as well.
have you checked viewport in your meta?
I am using
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
I didn't feel any performance overhead. Perhaps some parts of your webapp hit on the weakness of web view.
You may start commenting your HTML until you find your webapp go smooth.
I have updated a New iPad (iPad 3) with iOS 6 and I do not see the rendering problem any-more. I have seen in several articles that the speed of Safari has significantly increased. This performance gain in iOS 6 is solving the problem for my web-app.
As the iPad's we use are dedicated for the web-app, I will recommend iPad 3 only with iOS6.
Thanks for the posts and answers !
Related
I'm trying a basic experiment where I add a grid of squares to a macOS ScreenSaver view (created through the Xcode template). I am running on a reasonably well performing MacBook Pro, but for some reason, adding my grid (composed of ~900 NSView objects) completely locks up my system — the screen saver hangs.
This isn't an unreasonable amount of views, surely? What's interesting is, I've tried the exact same layout in a macOS app (drawing in its NSWindow), and the performance is totally fine.
What is the difference?
What was causing the performance problem was that all the views were layer-backed. Once I stopped requesting the view to have a layer, performance improved dramatically.
I also went so far to use CAShapeLayer instead for improved animation performance.
I am using a custom item renderer with an image and a line of text. I have the image set to blendMode="luminosity" and when you run it on the desktop air to debug and test it it appears to run perfectly fine without any lag. However if you test it on a mobile device it causes the list to lag a ridiculous amount to the point where it is unusable. If I do this on just one item of the list it will cause the lag to appear. It gets worse the more images there are that use it but even with just one it is clearly evident and practically unusable.
Does anyone know if there is a way to improve the performance of this or is there no work around?
Thanks
This is really weird behavior. Having difficulty even quantifying. Have had to revise a few times.
Best I can do is the following:
The tech stack for my app is Backbone Marionette, handlebars.js, require.js.
The app contains images mostly of icon size - say 32x32 and under. Some jpg, some png, some svg.
Some of the images, the same ones each time, don't display. That's a common issue on which many have posted. No big news there.
But if I hit the sleep button, leave the iPad sit for a minute or two until the unit really goes into hibernate mode, and then revive it, the images slowly and magically fade in. They don't abruptly display when the screen lights. They fade in afterward.
Doesn't work to just hit the sleep button and instantly revive. Have to wait a minute until it truly hibernates.
After true hibernation, no matter how many times I refresh the page, the images are there. But, if I go and clear the cache on Safari and load the page, the images are not there again - until I do that hibernate thing.
All of these images do display without fail in a browser on a PC (all flavors). It's just on the iPad that they don't.
I thought, at first, it was just images I was loading in collection views. It is not. I have a third party HTML5 video player in the app. It has a play button and other controls in svg format. This also exhibits the behavior above.
Once the iPad has hibernated and been revived, the images fade in. Only clearing cache makes them disappear again.
There are no 404 errors when the images don't display (checked in dev console on a MAC). In fact, if I just tap the screen where the video play button is supposed to display, the player begins. So the button seems to actually be there, just not painted on the screen - until you do that hibernate thing.
Some images in the app always load no matter what. I'm looking at those images to see if I can note anything special about them or the code which renders them.
I tend to think it's not the images themselves because the very same images in a plain web page always display on the iPad. Also, that third party video player in a plain web page displays the svg play button and controls without fail on the iPad.
It's just in my app that the behavior occurs. So it's logical to think my app is where the problem lies. I just can't seem to find a common thread for the images that always work vs ones that don't.
Not sure what code I can even post here. I'll look and see what might make sense to post.
Definitely a problem loading images dynamically via the framework. They are there but do not paint. No idea what the problem actually is. Literally only happens on Safari mobile browser. Can't make it happen anywhere else, even old IE. Know one solution that definitely works though. Preload all the images by explicitly including them in a div in your markup. When you load your marionette app, remove the div - $("#preload-images").remove(). Thereafter the images never fail to paint when added dynamically via marionette.
I'm building a web app to design and animate simple 3d scenes using the Away3D library, but the design of the interface itself is built around a scrolling menu which takes up the whole height of the screen.
The problem is, on OSX browsers have a silly quirk where if the page is scrolled when it has already gone as far as it can, the page can be dragged slightly further, revealing a brushed metal background. This looks nice and whatnot, but it pretty much ruins scrolling in a swf object. I use flash builder and export to safari, which is just about useable, if pretty annoying (especially with a mac touchpad, which can give a much higher scroll delta than a mousewheel can), but when I open my app in firefox/chrome the same effect happens, and causes the app and browser to slow down drastically.
I've found code which uses ExternalInterface to stop the swf sending mouse events to the page, but they all seem to disable detection in the swf as well, and I can't find anything else which help. If anyone knows of a solution you'll be saving me from throwing a few months' work away for what seems like a suspiciously unnecessary drawback to Flash on OSX!
Thanks in advance if anyone can help
Figured it out, in case anyone else gets stuck with this:
The feature's called elastic scrolling, if you're running a flash/flex app which takes up all the browser space you can simply set body{overflow: hidden;} in page CSS and it'll work just fine. Obviously, this disables any kind of page-scrolling - I believe you can turn it back on inside nested elements though.
Hope this helps someone anyway!
I have OpenGL application with UITextField in the main menu. When I tap on the text field the keyboard appears and I can edit the text. But if I running under iOS 5 and if I try to split keyboard then the keyboard starts splitting (I mean animation) and then hangs when I release my fingers. I mean it hangs on half splitting - and does not responds more. But my app is still alive - and render is working well - background animation is still working.
I have just made a simple test - have disabled the render at all. And the problem has gone. So the problem is related to OpenGL.
I use OpenGL ES 1.1,
XCode 4.2 and iOS SDK 5.0.
Do somebody have similar problems? Any suggestions?
Please help.
UPDATE:
I have just tested two more games from AppStore - and in one I have found this problem too!
'Roads of Rome HD free' - iPad game.
I've encountered this problem too, but I was able to fix it due to previous experiences. In one application we found that if we keep our GL view active while playing video, the video playback position slider didn't behave smoothly. The same seems to happen with the keyboard split. If your problem is the same as mine, the issue is related to the keyboard split animation not finishing (and, in our case, the point where remained struck varied with each test)
We solved the issue stopping the animation on your GL view (I bet it's called EAGLView) when receiving a UIKeyboardWillChangeFrame notification and starting it again after UIKeyboardDidChangeFrame.
Old post, but I just came across this problem in ios 8 on an iPad3.
Running an OpenGL app at 60fps seems to throttle the keyboard update. Reducing your FPS while the keyboard overlay is active will fix the issue.
I'm using GLKViewController to manage the update and Draw callbacks with a 60fps refresh, but that was causing the keyboard split to lock up half completed.
I found the best solution for me was to set the view's preferredFramesPerSecond to 20 while receiving text input, and then set back to 60 after the textView is closed. As well as fixing the keyboard hang, it also just makes the keyboard generally more responsive.
myViewController.preferredFramesPerSecond = 20;