Scroll vs css transform (v18)

Revision 18 of this benchmark created on

Preparation HTML

<style>

#outer{
width:1280px;
height:800px;
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.msTransform = c;
ready

Revisions

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