Search code examples
htmlcssscrolldraggablecss-transforms

is there performance difference between -transform translate ans scroll

I am building a maps website like google maps. There will be tiles of images connected to each other. The map will be explored by dragging with mouse where after each drag, new images will be loaded. In order to have explore-by-dragging functionality, I have found two ways:

  1. calling scrolling functions to scroll to the right place in the map
  2. applying css-transform translate on the map so that right portion of the map comes into the displayed area.

The question is, is there a performance difference between the methods? (mainly in terms of rendering speed and dragging smoothness) Also, are there any other criteria to prefer one of the methods?

Solution

  • Scrolling is better because CSS transforms can cause document re-flows, which are quite expensive.

    See: http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/