Scroll vs css transform (v19)

Revision 19 of this benchmark created on

Preparation HTML

<style>

#outer{
width:100px;
height:100px;
overflow:hidden;
outline:1px dotted blue;
}
</style>

<div id="outer">
<img id="inner" src="https://farm8.staticflickr.com/7139/6900574562_3f979a36ff_o.jpg">
</div>

Setup

var o = document.getElementById('outer'),
  is = document.getElementById('inner').style;

Test runner

Ready to run.

Testing in
TestOps/sec
ScrollTop
o.scrollTop = 100*Math.random();
o.scrollLeft = 100*Math.random();
ready
CSS transform
var c = 'translate(-' + 100*Math.random() + 'px,-' + 100*Math.random() + 'px)';
is.MozTransform = c;
is.WebkitTransform = c;
is.OTransform = c;
is.msTransform = c;
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.