Geek Answers Handbook

Skrollr - very mutable animation in Safari

I am building a page with skrollr and it works great! I work as expected in Chrome, Firefox, and IE. However, in Safari 6.0.5 on Mac version 10.7.5, it is very mutable when animating elements when scrolling. Basically, when I scroll down, it doesn’t animate keyframes. Instead, it simply jumps to a specific keyframe depending on where I was scrolling. I can’t understand why this will be done only in Safari. Sorry, but I can’t post a link to the site because of the NDA. Any help or suggestions on this subject would be greatly appreciated.

+4
source share
1 answer

In absolute mode, I noticed the same thing when keyframes were inside nested elements. As soon as I pulled them out, the shaking was gone. For example.

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>
+3
source

More articles:


All Articles