4

I am building a page with skrollr and it works great! I have it working the way it should in Chrome, Firefox, and IE. However, in Safari 6.0.5 on a mac version 10.7.5 it is very choppy in animating the elements when scrolling. Basically, when I scroll down it does not animate the keyframes. Instead, it just skips to a certain keyframe depending on where I have scrolled. I cannot figure out why it would be doing this only in Safari. I'm sorry, but I am not able to post a link to the site due to an NDA. Any help or suggestions on this would be greatly appreciated.

Peter
  • 41
  • 1
  • 1
  • 3

1 Answers1

3

In absolute mode, I noticed the same thing when keyframes were within nested elements. Once I took them out, the choppiness went away. E.g.

Choppy:

<section class="scene two" data-0="transform:translate(0%,100%);" data-100p="transform:translate(0%,0%);">
  <div class="box" data-100p="transform:translate(0%,100%);" data-200p="transform:translate(0%,0%);"></div>
</section>

Smooth:

<section class="scene two" data-0="transform:translate(0%,100%);" data-100p="transform:translate(0%,0%);"></section>

<section class="scene three" data-100p="transform:translate(0%,100%);" data-200p="transform:translate(0%,0%);"></section>
  • 6
    Thanks for your response. What I had to do on Safari is use this -webkit-transform: translateZ(0); on the element that was doing heavy animations to force hardware acceleration. This will make safari render like it's in 3D and smooth out the animations. However it did screw up other things on my page. I used these properties to help fix those issues -webkit-backface-visibility: hidden; -webkit-perspective: 1000; Also if you do this on an element using background-attachement: fixed; it will definitely screw up the way things look so be aware of that. – Peter Nov 06 '13 at 21:42
  • 2
    @Peter thanks, your suggestion did the trick. However, I got *slightly* better results with `-webkit-transform: translate3d(0,0,1px);` FWIW. Thanks again. – couzzi Dec 18 '13 at 05:58