问题
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/
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!
回答1:
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!
来源：https://stackoverflow.com/questions/17477064/image-scale-and-animation-improvement