CODEWITHSUNDEEP
ioscssanimationgoogle-chrome-devtools
spacewindow
spacewindow

Reputation: 407

CSS Animation transform: translate poor performance on iPad

I am finding it hard to troubleshoot slow/ janky rendering of a transition animation on my portfolio site http://robthwaites.com, when viewed in mobile Safari/ (iPad and iPhone).

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.

Transition is cued with jQuery .addClass() (adds .hidden class to div). Transition is super-smooth in any desktop browser.

I think I have followed the tips in this article, keeping my transition to transform: translateX only. http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

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.

Changing the SVG background image for a PNG did nothing to help performance.

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.

Full CSS for site here. DIVs in question with transition below.

.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;
}

Upvotes: 0

Views: 11110

Answers (1)

tagawa
tagawa

Reputation: 4611

Try adding this:

.workdoor-top, .workdoor-top.hidden, .workdoor-bottom, .workdoor-bottom.hidden {
    -webkit-transform: translateZ(0);
}

which should force the device to use hardware acceleration.

Alternatively either of these properties should also work:

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

There's a good post explaining this here: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

Upvotes: 4

Related Questions