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)
Related
Is there any benefit on using the will-change property on an html video tag to increase performance ?
if so, how should i use it in order to make the video run on the GPU using Hardware Acceleration ?
will-change is used to hint the browser, that a property or the content of the corresponding DOM-Element will likely change in the near future. Therefore it requires as value a CSS-property (e.g. will-change: opacity) or the contentskeyword (will-change: contents).
If None of this is changed, I see no reason for using it on the video-tag.
As the title says, what are the differences between transform: translate(x, y) and position: relative.
Since they both accomplish the same thing (position elements) anyway, then how do they differ in purpose and application?
I read an article about centering elements using "transform: translate;" that said it is better to use "transform" due to GPU and optimization reason, but I don't really see the problem since it's not a big deal anyway if you're just re-positioning an element and not animating it.
So in the end, how are they both different and in what ways?
Basically translate relies on CSS3 2D Transforms while the position property is a CSS2 level.
In browser that support it has been said that using translate will boost the entire graphical peformance of the browser,
but not all browser do support it,
so if you care to give widespread browser support CSS2 position is surely better,
while transform:translate() is the future.
I want to compose two separate CSS keyframe animations to make an image vibrate and rotate (see http://jsfiddle.net/3zAeZ/). The problem I believe I'm running into is: I'm setting the transform attribute in both keyframe rules, therefore one rule is clobbering the other.
I know this works using top & left instead of translate, but the keyframes rule will be much easier to reuse in the future if I do a transform (for example, in case I ever need to position the image differently).
I'm stumped. Can I do this? Is there a better way I should be doing it?
You can use multiple transforms like
transform: rotate(1337deg) scale(1.5) translate(6em, 300px);
Now I realize that you need two different animation durations as well.
So the best I can come up with is using two elements http://jsfiddle.net/3zAeZ/1/
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.
I created a mockup to demonstrate my problem. I fear the solution falls in what I did with the first example (box1).
Just not sure why I can't apply a css transform to a parent element and avoid applying it to the child element or at least override it.
Let me know if there is a way to get the effect of the first example using the transform property. I don't want the second image to be scaled as well. Just the parent div.
Note
I'm trying to use this property to enable GPU acceleration.
Have not played with this in any other browser but the chrome.
But it looks like overflow hidden set on parent element implies resizing inheritance on image.
So if you set overflow auto on the boxes to which animation is applied, it should fix the resizing inheritance.
http://jsfiddle.net/gnrlbzik/5Q8EC/ tests the overflow set to auto, that keeps image dimensions in tact.
To be semantic I don't think you should be able to stop it from transforming a child element being you are transforming/scaling it's container, not resizing it. A transform is not just animating the width like the example on box 1, it scales the x.
I believe this question is about trying to gain some performance boost by using features that use the GPU to process animations. This is possible, I believe, by effectively treating the elements as an image that the GPU then animates. Thus you are not able to have an element inside that dynamically keeps its size/shape during an animation. Maybe there is a way to counter the animation by transforming the element within that you would like to keep static, but this will probably not be efficient nor effective.
Note: I am not well versed in the actual technology webkit uses to render these transformations. So sorry if the finer details of the rendering are not quite accurate. I will update this if anyone comments with a better description of how transform works.
I wanted to use -transform to get the GPU performance perk. I guess I'll continue to use the width animation: http://jsfiddle.net/Vyaf3/22/ but with applying a css3 property that would enable the GPU acceleration.