Performance enhancing styles

[KB1RMA]

First off, thanks for providing the source to this. It's really a great example of a well laid out project using the Skrollr.Js library and inspired me to lay my project out in a very similar way. Certainly helping save some time refactoring!

While putting together our project in a very similar style, I came across a very small performance tweak that has quite a large effect on frame-rate when using transforms to manipulate full-screen elements. Especially on lower powered devices.

This was really inspired by a blog post I came across when researching CSS performance: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css

.performance() {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    -webkit-perspective: 1000;
       -moz-perspective: 1000;
        -ms-perspective: 1000;
            perspective: 1000;
}

I used it in my project with great results and applied it to your source just as a proof of concept. And perhaps a bit of thanks in there as well :). Really only the Materials section requires any of it as that's where most of the repaints seem to occur. There are still a few left, but this drastically increases how smoothly it scrolls.

Before Tweaks:

After Tweaks:

Anyway, pop it in there if you want, or not. But hope it's useful for someone!

[KB1RMA]

Oh and it should be noted that backface-visiblity: hidden; is important too, but you already included that with a wildcard, so not necessary to add.

[marekhrabe]

Hi Christopher, thanks for the PR and putting a time into tracking performance, I will totally be merging that 👍

backface-visiblity: hidden; is here the bomb for performance. The website without it was just really laggy on my Macbook. I really like that trick and surely, the zero transform is another great one :)

[KB1RMA]

Cheers!