I'm currently trying to figure out how I can move elements (to an arbitrary position) on a web page without triggering content review (and therefore lacking a budget of 60 frames per second).
My approach was to use transform: translate(...) , since the composition would be executed on the GPU and does not need any repainting of the content. However, when I change the transform property, the element will be redrawn.
I created an example for this case:
<!DOCTYPE html> <html> <head> <title></title> <style> #moving { transform: translate(0, 0); width: 100px; height: 100px; background-color: red; } </style> <script src="http://code.jquery.com/jquery-2.0.3.js"></script> </head> <body> <div id="moving"></div> <script> setTimeout(function () { $('#moving').css('transform', 'translate(100px, 100px)'); }, 2000); </script> </body> </html>
source share