Search code examples
cssimageperformancewidthscale

Image scale and animation improvement

Can someone know how scale (width) to 100% of the screen a img element and keep big performances in animation ?

In my first example, i set the width property to 100%. For testing purpose i made a animation loop in this fiddle to see performance chunk : http://jsfiddle.net/tXXmm/1/. I have 35fps when the image is hidden by the overflow of the parent element.

When i remove the width property, i have 60fps to the same example : http://jsfiddle.net/tXXmm/2/

enter image description here

I need to know if there is some methodology to get the same result as the first example, with the performance of the second example. Please consider : The image resolution is variable. Only the parent element has height: 500px;. Also, my design is a fluid design (this is why the width of my image needs to scale the full width of the screen).

Any solutions is appreciated (PHP, JS, CSS...). Thank you!

Solution

  • Ok, I found something. I have added transform: translateZ(0); and now i got 60fps in Google Chrome! http://jsfiddle.net/tXXmm/7/.

    It appears this property force the activation of GPU Acceleration in webkit browsers. It's seems to be a good tip to go for now. Thank you for your help!