Skrollr.js is not working well on browsers

[danielpom]

I'm using the skroll.js. When working with Mozilla FireFox every thing works perfect. Though, when trying to run it on chrome or explorer, for example, it works crappy. It is stucked from scroll to scroll, with lags - it's not fluid.

My javascript is : $(document).ready(function(){

var s = skrollr.init();

}); does any one have any suggestions how for improving the performances?

There is a good site, as an example, where the scrolling works correctly in chrome as well:

http://journey.lifeofpimovie.com/

we are using height and width changes and also display chanages.

Thanks to the helpers in advance.

[Prinzhorn]

need code (I don't consider these three lines of JavaScript code. They're trivial and required to use skrollr). Post a link or at least your HTML.

[danielpom]

https://drive.google.com/folderview?id=0B4ZtlDpI34yCQkluSjlfLUUyN3c&usp=sharing

[danielpom]

Another thing i have just noticed is that when I make the windows smaller (restore down) it works just fine, smooth!

[Prinzhorn]

Try animating transform:scale instead of width

[herrMartin]

for safari place a empty div into the body with "style=transform: translate3d(0,0,0);" this will activate the gpu rendering and improves the rendering a lot. webkit browsers get choppy if you use big images and scale them. try to avoid animations with css blur or opacity has also somethime something to do with choppiness. And one of the biggest improvents, give all elements, images a with and height. for bigger sites use an img { height= auto; with= auto} in the first lines of your css. to avoid headaches and a lot of pain with chrome use this also in the beginnig of your css

*,:before,:after { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-backface-visibility:hidden; }

without you get really strange rendering issues, with chrome and safari. fun fact the rendering issues depending on the amount of code lines, animations… bla

my experience is, that small sites won't make any problems if your html, css and js is validated and clean, but with a growing amount of animations, objects and functions you will run against severall walls. Safari, chrome and firefox are extremly different in case of rendering and js performance. At the moment the newest firefox is the most forgiving and fastest browser for anmations and javascript. It runs circles around safari and chrome.