Choppy/glitchy CSS3 transitions problem on the iPad 1 (with example)? - javascript

With this project at work, we have had to make a iPad HTML5. Using Backbone and jQuery Mobile, we thought we were on to a winner, but jQuery Mobile seems to be causing more problems than it should be. Using such things as page transitions with jQuery Mobile is painfully slow, choppy and glitchy (I do understand it's still in Alpha).
For our needs, we do want a smooth way of transitions between pages. I set about doing some experiments to see if I could get them any better for bespoke solution. I feel I'm quite close with this, but the animations still seem choppy and glitchy. I wonder if there is any other way to approach this? Or if there is a nugget of information that will help getting this rock solid?
I'm using translateX()/translateY() CSS3 (hardware accelerated) transforms to ensure it gets the best performance, but it still seems unreliable with it's performance. Sometimes it's ok, sometimes it's not.
I have uploaded an example... Please note, this is only tested in Chrome/Safari (which it looks fine in) and Mobile Safari on the iPad 1st generation (which it looks choppy in). If you happen to have an iPad handy, please take a look at this example...
http://littlejim.co.uk/code/ipad/jquery-plugin-page-transitions/
It's made as a basic plugin, because once I have this nailed I want to develop it more.
Can anyone help with this? I just wonder why it's still choppy on the iPad?
UPDATE: I tried using translate3d() as well as the translateX and translateY(), made no difference.

Only 3 dimensional transforms are hardware accelerated on the iPad. You should use translate3d and provide a 3rd parameter, set to zero.
http://googlecode.blogspot.com/2010/08/css3-transitions-and-transforms-in.html

Related

Is there a way I can force chrome to do subpixel rendering for a slow translation?

Im doing a very slow transition of a background image (a view of space that slides slowly to the left). My problem is while it looks beautiful on Firefox, it looks horrible on Chrome. I get a "jittery" effect due to Chrome's lack of subpixel rendering, and the image just snaps to the next pixel. I cannot speed the image up because it will destroy the effect Im trying to achieve. I have tried using TranslateZ() tricks, I have tried every CSS3 effect I could think of to make it look better, Ive tried Kinetic.js, Ive even tried Babylon.js hoping that WebGL would fix my problem.
At this point Im at a loss and I might just have to give Chrome users a static background and cater more to the Firefox users in regards to the neat little things I can do for the UI UX, and then just put a disclaimer on my site saying that the page is best viewed in FF.
I REALLY dont want to do this. Is there ANY work around at all?
You can force subpixel rendering by applying a small transformation:
#container {
transform: rotate(-0.0000000001deg);
-webkit-transform: rotate(-0.0000000001deg);
}
But instead of using JS to make the animation work, why not use CSS3 animations?
If you use transform: translate() browsers will use subpixel-rendering by default.
Also since the performance is better you shouldn't get your jittery/wave motion.
More info on performance here: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
I've put together a simple demo here: http://jsfiddle.net/yrwA9/6/
(For the sake of simplicity I only used the -webkit- vendor prefixes)

CSS/Javascript fluent push menus on all devices

I am trying to implement menus like "Left Push Menu" here:
http://tympanus.net/Blueprints/SlidePushMenus/
However, the animation here is not smooth not on iPod, not on recent iPad. I wonder whether there is something wrongly implemented or whether it must be done with javascript to create smooth animation.
For instance, what works smoothly is this:
https://medium.com/
The difference is that first link moves the whole document content, the second just moves the right part, which covers the left (But I doubt it makes such a difference in animation speed). I examined the source and I can't find out whether it is done by CSS or javascript.
What is the key to making the animation smooth?
From my experience, it just seems like iPads/iPods are not friendly when it comes to animations/tweening.
I looked at your website on my phone, and it seemed to work great (it's an android). Personally, I wouldn't worry about it, I don't think it's that big of a deal. But if it's really bugging you..
I'm guessing you're using css3 transitions right now? You could try javascript, here's a great tutorial: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions
I find a solution which works great on all platform:
-webkit-transform: translate3d(0,0,0);
Moving with translate3d is smooth and fast.

How to optimize highly detailed jQuery animations for mobile

I am working on a project, with no BoilerPlate, right now that uses a lot of jQuery animations such as paralax of several elements and the movement of 20 small .png images of clouds in the background (to make a cloud time-lapse) which run very slow and laggish on mobile devices. I want the same UX for both desktop and mobile environments. I am using mediaQueries to use smaller images/elements for smaller screens, but this doesn't seem to optimize mobile performance like I thought it would. I am familiar with HTML5-Boilerplate and BP-Mobile but am not sure if either one will help with my problem.
How can I make these particular effects run smoothly on mobile?
I would try to see if CSS3 animations have any effect. jQuery animate has severe performance drawbacks compared to CSS3. Even on a regular computer it is much smoother.

Html5 for mobile - swipe scrolling

I'm working on a few html5 screens which will be embedded inside native mobile apps (for ios and android).
I obviously don't want to reinvent things here, and would like to use a stable framework on the javascript side of things.
I tried using JQuery Mobile but it is way more than I need, plus they kind of force you to do things their way.
All I need is to have an element which can be (vertically) scrolled by swiping (without visible scrollbars), but I couldn't find how that can be done with JQM easily (without all of their widgets, themes and defaults).
I also tried jGestures but it did not work at all.
Any ideas what will be the best approach?
Thanks.
Update
I found this jquery plugin which does what I need: https://github.com/ifightcrime/touch-scroll
You can use -webkit-overflow-scrolling: touch; which uses the native inertia scrolling built into the phone. Works really well. There is a scrollbar, but I'm sure some clever positioning could solve that.
More info here: http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/
And here: http://fioravengi.blogspot.co.uk/2011/06/implications-of-ios-5-webkit-overflow.html
Hope that helps :)
edit: Sorry, just realised you need it to work on android. I doubt this does. For iOS though this works a treat. So, half an answer!

jQuery animations performance with Mobile Safari

I've just recently started developing a site for iPhone using jQTouch, and have the following code:
<li class="title" onclick="showDesc('desc1');">Post Title</li>
<li id="desc1" class="shortDesc">
Short description of post content
Read
</li>
<script type="text/css>
function showDesc(id){
$("#"+id).slideToggle();
}
</script>
"desc1" is hidden in the CSS and displayed when the user clicks the post title (I'm just working on a mockup, so the argument passed to showDesc() is hardcoded at the moment)
My problem is that when viewing it on the iPhone itself, the animation is incredibly slow and stuttery. It runs fine in desktop browsers (obviously!) and the iPhone simulator, it's just on the unit itself (running iOS 4.3.2).
My question is this: Is this an issue with my code or is it a case of jQuery not having been optimized for Mobile Safari?
I'm using jQTouch for the mobile framework, but the documentation only discusses page transitions by way of animation, so I'm not sure if there's a way of doing it with that.
Alternatively, would this task be better suited to CSS3 animation?
Thanks in advance!
Yes, it is highly recomended to use CSS3 transitions. They are hardware accelerated, whereas Javascript animations are not. You would want to transition opacity as well as width/height parameters for the slideToggle animation. It's nasty, but it gives you great performance
You should use CSS3 animations on mobile as "CSS rendering engine" has more opportunities to optimize performance. Especially things like transitioning transforms (things that do not cause re-layouts and re-rendering of textures) - they are mapped on hardware pretty well.
It turns out, that a lot of the rendering issues on the phone itself were caused by the webkit-box-shadow property applied to the hidden <li>
Although CSS3 is a much more "native" option for this task, the jQuery slideToggle() function seems to work perfectly well.
I really ought to have given a more detailed overview of the CSS, but have now learned more about CSS3 animation based on your recommendation, so it was worth it!

Categories