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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <title>JS janking CSS transition</title>
   6
   7 <style>
   8   html {
   9     font-family: sans-serif;
  10   }
  11
  12   .box {
  13     background: green;
  14     position: relative;
  15     width: 100px;
  16     height: 100px;
  17     -webkit-transition: -webkit-transform 10s linear;
  18     transition: transform 10s linear;
  19
  20     /* Adding these lines fixes the issue
  21     -webkit-transform: translate3d(0, 0, 0);
  22     transform: translate3d(0, 0, 0);
  23     */
  24   }
  25 </style>
  26 </head>
  27 <body>
  28 <div class="box"></div>
  29 <button class="run">Run</button>
  30 <script>
  31   function jankify() {
  32     var start = Date.now();
  33     while (Date.now() - start < 250);
  34     setTimeout(jankify, 750);
  35   }
  36
  37   var box = document.querySelector('.box');
  38
  39   window.addEventListener('load', function() {
  40     box.style.transform = box.style.WebkitTransform = 'translate3d(500px, 0, 0)'
  41     jankify();
  42   });
  43 </script>
  44 </body>
  45 </html>