By: Michael Whyte
I read that in order to activate iPhones hardware acceleration you needed to use translate… I found this to be true when I made a simple dropdown using jQuery slideDown/slideUp…it was choppy on the...
View ArticleBy: kevin
<p>I'd be interested to see how translate3d measures up. I use translate3d in my <a href="http://liquidslider.kevinbatdorf.com" rel="nofollow">Liquid Slider</a> because I thought...
View ArticleBy: Chris Coyier
<p>Yah it's important to look at how all the other browsers perform with the different methods as well, desktop and mobile. The good news being: they all do better with translate.</p>
View ArticleBy: Rachel Nabors
Thank you both for posting this. It was great to toy with the Chrome Dev Tools on some of my own animations. Keep it coming!
View ArticleBy: Dominic
Here on FF17, translate() is MUCH better, especially when I hit “Add 10 more Macbooks”. Using top/left, the animation is very choppy and the sub-elements (like the opening) lid do not all move together...
View ArticleBy: Andy Griffin
And as a result, correct me if I’m wrong, doesn’t the clickable area of an element move around with the trbl method, but NOT with the translate?
View ArticleBy: Gray
Mind. Blown. Watched Paul’s video, too, fantastic stuff. Did a project a while back that was super heavy on left/right animation, might just have to go back and update it.
View ArticleBy: Josh
Andy, as the entire layer moves, I believe that ‘clickable area’ does move: http://jsfiddle.net/joshnh/pyagP/
View ArticleBy: Andy Griffin
Right you are. I swore I saw a demo somewhere where the thing moved on :hover and the hot area stayed put . . . Must have been something else. And a brave soul to use JSFiddle instead of CodePen around...
View ArticleBy: Marco
nice tweet and post! the discussion is good and it could be expanded to other browsers, like Firefox or Opera for good C:
View ArticleBy: cnwtx
Interestingly, on Ubuntu with firefox, of the red ball version, the top/left was slightly smoother. With the macbook example, the translate was much smoother.
View ArticleBy: H Max
This just proves why multiple weekly visits to css-tricks/Coyierland is imperative. They address every little web nuance with scientific discipline, drilling down to accurate info time after time. One...
View ArticleBy: Nate Eagle
Did someone say my name? I’m delighted that my super-complicated radial gradients have finally been of service to mankind.
View ArticleBy: Jack
I know I'm a little late to the party, but I thought you guys might find this interesting... I'm seeing that top/left is <strong>MUCH</strong> faster in most browsers when more elements are...
View ArticleBy: Chris Francis
Just to add my findings: Chrome latest (23.0.1271.97) looks much smoother in the complex example using translate() with 1 Macbook, but most weirdly the performance <strong>doesn't</strong>...
View ArticleBy: Mathew Porter
Nice post, I have found that the latest builds of FF and Chrome are much smoother, but the fact remains that we want to move towards using lots of nice CSS3 effects, but the user’s are holding this...
View Article