title: CSS Animation transform: translate poor performance on iPad
body: <p>I am finding it hard to troubleshoot slow/ janky rendering of a transition animation on my portfolio site <a href="http://robthwaites.com" rel="nofollow">http://robthwaites.com</a>, when viewed in mobile Safari/ (iPad and iPhone).</p>
  
  <p>When you click on one of my homepage thumbnails, the .presentation content appears after a transition in which some large divs translate out (div.workdoor-top and div.workdoor-bottom, each with a large triangular grey background SVG). Creates a kind of 45degree angle 'wipe' effect.</p>
  
  <p>Transition is cued with jQuery .addClass() (adds .hidden class to div). Transition is super-smooth in any desktop browser.</p>
  
  <p>I think I have followed the tips in this article, keeping my transition to transform:  translateX only. <a href="http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/" rel="nofollow">http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/</a></p>
  
  <p>I have attempted to observe where the problem might be using Chrome Dev Tools Timeline, which shows a lot of Recalculate Style happening on this transition, but I am not sure where this is happening and how I might fix it.</p>
  
  <p>Changing the SVG background image for a PNG did nothing to help performance.</p>
  
  <p>Sorry I can't be more articulate, but I would like to know if it is possible to (a) target the problem with Chrome Dev Tools Timeline (or in another dev tool), and (b) find a fix so this will animate smoothly on a mobile device.</p>
  
  <p>Full <a href="http://robthwaites.com/css/style.css" rel="nofollow">CSS</a> for site here. DIVs in question with transition below.</p>
  
  <pre><code>.workdoor-top {
    position: absolute;
    top: 0%;
    right: 0%;
    z-index: 30;
    width: 2000px;
    height: 2000px;
    background: url(../portfolio-door-top.svg) top right no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    pointer-events: none;
    -webkit-transition: -webkit-transform 0s ease;
    transition: transform 0s ease;
    -webkit-transform: translate(0px, 0);
    -ms-transform: translate(0px, 0);
    transform: translate(0px, 0);
  }
  .workdoor-top.hidden {
    -webkit-transform: translate(2000px, 0);
    -ms-transform: translate(2000px, 0);
    transform: translate(2000px, 0);
    -webkit-transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
  }
  .workdoor-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 30;
    width: 2000px;
    height: 2000px;
    background: url(../portfolio-door-bottom.svg) bottom left no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    pointer-events: none;
    -webkit-transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    -webkit-transform: translate(-15px, 0);
    -ms-transform: translate(-15px, 0);
    transform: translate(-15px, 0);
  }
  .workdoor-bottom.hidden {
    -webkit-transform: translate(-2000px, 0);
    -ms-transform: translate(-2000px, 0);
    transform: translate(-2000px, 0);
    -webkit-transition: -webkit-transform 0s ease;
    transition: transform 0s ease;
  }
  </code></pre>