Skrollr - Very choppy animations in Safari

safari skrollr
Peter picture Peter · Oct 9, 2013 · Viewed 10.1k times · Source

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.

Answer

user2929861 picture user2929861 · Oct 28, 2013

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>

Related questions

How to remove the border highlight on an input text element

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it. For the layout I am working on, this is distracting and does not look right. <…

Read More
onclick="location.href='link.html'" does not load page in Safari

I cannot get onclick="location.href='link.html'" to load a new page in Safari (5.0.4). I am building a drop-down navigation menu using the <select> and <option> HTML tags. I am using the onclick handler to …

Read More
Get the real width and height of an image with JavaScript? (in Safari/Chrome)

I am creating a jQuery plugin. How do I get the real image width and height with Javascript in Safari? The following works with Firefox 3, IE7 and Opera 9: var pic = $("img") // need to remove these in of case img-element has …

Read More