CSS3 Transition overflow-hidden

Benchmark created by Pedro Valentim on

Description

Test performance of adding a transform3d transition to an element with overflow hidden against an element with overflow visible. Webkit only for now

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<style>
.noOverflow { height: 250px; width: 1000px; }
.hasOverflow { overflow: hidden; height: 250px; width: 1000px; }
.animate { -webkit-transition: -webkit-transform 20ms; }
.child {
  width: 250px;
  height: 250px;
  float: left;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translate3d(0,0,0);
}
</style>

<div id="a"></div>

Test runner

Ready to run.

Testing in
TestOps/sec
Add transition without overflow:hidden
// async test
var $a = $('#a')
$a.html('<div id="b" class="noOverflow"><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div></div>')
var $b = $('#b')
$b.css('-webkit-transform', 'translate3d(-200px,0,0) scale3d(1,1,1)')
$b.addClass('animate')
$b[0].addEventListener('webkitTransitionEnd', 
     function( event ) { 
        deferred.resolve()
     }, false );
$b.css('-webkit-transform', 'translate3d(200px,0,0) scale3d(1,1,1)')
ready
Add transition with overflow: hidden
// async test
var $a = $('#a')
$a.html('<div id="b" class="hasOverflow"><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div></div>')
var $b = $('#b')
$b.css('-webkit-transform', 'translate3d(-200px,0,0) scale3d(1,1,1)')
$b.addClass('animate')
$b[0].addEventListener('webkitTransitionEnd', 
     function( event ) { 
        deferred.resolve()
     }, false );
$b.css('-webkit-transform', 'translate3d(200px,0,0) scale3d(1,1,1)')
ready

Revisions

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