I know that sometimes browsers will GPU accelerate a CSS transform. But when does that happen, and is there a way to force GPU acceleration for a smooth animation?
this article
Most modern browsers support GPU acceleration, but they only use it when they think a DOM element will benefit from it. The strongest indication is that a 3D transformation is being applied. So use the 3D-equivalent transform. For example, instead of transform: translateX(50px), use transform: translate3d(50px, 0, 0). See this article for more information.
You can use the css "will-change" property:
will-change: transform;
Some css properties which are GPU accelerated (not always):
filter
opacity
transform
Related
I'm using Isotope (isotope.metafizzy.co) with a Masonry Horizontal layout. Example:
http://codepen.io/desandro/pen/oCiAD
It works just fine, but I'm curious as to why the library sets the left/right and top/bottom properties instead of using transforms. It's my understanding that using 3D such as
transform: translateZ(0);
or
transform: translate3d(0,0,0);
will force the element onto another layer, triggering GPU rendering and better performance. I realize this is probably done intentionally, but I'm not clear as to why.
Have browsers improved and is this no longer necessary? If not, is there a way to enable 3d transforms in Isotope?
Thanks in advance.
I think one of the reasons could be that Webkit treats 3d transformed elements as textures instead of vectors in order to provide hardware 3d acceleration which could cause a blurry text or anti-aliasing issues.
Example:
http://jsfiddle.net/gibbok/ccw7vvvg/
-webkit-transform: translate3d(0px, 100px, 0px);
I am making an app and realised that it is best to hardware accelerate animations.
I wanted to use jQuery animate enhanced, which works but I feel I want a better grasp on the whole idea of hardware acceleration:
When moving a div using top/left positioning for example using jQuery, will it automatically be hardware accelerated by adding transform: translate3d(0, 0, 0); ?
Will this hardware accelerate anything? Also, what about animation keyframes? Will you need to add a transform to an animation for it to be hardware accelerated?
Paul Irish wrote a great, in-depth breakdown of this very thing.
Usually 3d translation will trigger the GPU, if it doesn't, it's no big deal, it still works. Using translate over left/top coordinates is usually better performance-wise as well. I'm not sure about the animation keyframes part of the question though.
I went across change logs of MobileSafari in iOS 6 where it states:
WebKit no longer always creates hardware-accelerated layers for
elements with the -webkit-transform: preserve-3d option. Authors
should stop using this option as a way to get hardware acceleration
Does there exist any list of hardware accelerated CSS properties ?
These aspects of your document can be accelerated by the GPU:
General layout compositing
CSS3 transitions
CSS3 3D transforms
Canvas Drawing
WebGL 3D Drawing
More on this here http://www.html5rocks.com/en/tutorials/speed/html5/
Maybe this article will help toohttp://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/
And this one http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/
Paul Lewis & Paul Irish have a really good article about High Performance Animations.
"We’re going to cut straight to the chase. Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps."
4 things a browser can animate cheaply
Position - transform: translate(n px, n px);
Scale - transform: scale(n);
Rotation - transform: rotate(n deg);
Opacity - opacity: 0..1;
TranslateZ() or Translate3D() may be required.
Source: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
In CSS, you can force an element to always be hardware accelerated by applying a property like:
-webkit-translate: translate3d(0,0,0);
Is it possible to do the opposite? Apply a property that will make sure that item is never blended?
I don't know if there is a way to prevent it. But instead of using a translate3d, you could just do a plain translate which would not be hardware accelerated.
transform: translate(10px,10px)
I know that you can force GPU acceleration to achieve smooth animation of elements across the screen by applying a transition to the 'transform' property, e.g.:
elem.style.transition = 'all 3s ease-out';
elem.style.transform = 'translateX(600px)';
But I was wondering what would happen if you replaced the second line with:
elem.style.left = '600px';
Would/could GPU acceleration kick in for the "left" (or "top") property, or does it have to be on the transform property? It seems to me that it should be GPU accelerate-able, but I can't glean a final answer from any of the documentation I've read.
It's not accelerated. You have to use the specific CSS3 properties for it to be accelerateable. I think you'll find these links interesting:
http://www.html5rocks.com/en/tutorials/speed/html5/
http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
Does animating the value of a CSS3 transform with javascript rule out hardware acceleration?
The consensus I've gathered is that only the translate3d property is hardware accelerated on mobile devices such as Mobile Safari.
Further Reading.