transform_transition_js_block.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS janking CSS transition</title>

<style>
  html {
    font-family: sans-serif;
  }

  .box {
    background: green;
    position: relative;
    width: 100px;
    height: 100px;
    -webkit-transition: -webkit-transform 10s linear;
    transition: transform 10s linear;

    /* Adding these lines fixes the issue
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    */
  }
</style>
</head>
<body>
<div class="box"></div>
<button class="run">Run</button>
<script>
  function jankify() {
    var start = Date.now();
    while (Date.now() - start < 250);
    setTimeout(jankify, 750);
  }

  var box = document.querySelector('.box');

  window.addEventListener('load', function() {
    box.style.transform = box.style.WebkitTransform = 'translate3d(500px, 0, 0)'
    jankify();
  });
</script>
</body>
</html>

chromium/tools/perf/page_sets/tough_animation_cases/transform_transition_js_block.html