[JavaScript][CSS] Płynność animacji w różnych przeglądarkach Opcje

[kamilo818]

Witam,
zmagam się z pewnym problemem.
Jestem w trakcie pisania strony : http://page4u.waw.pl/ania5/ i wszystkie aniamcje podczas scrolowania strony działają poprawnie. Dokładnie chodzi mi płynność przscrollowania strony (przechodzenie między slajdami).

Pod Firefoxem wszystko działa idealnie, niestety pod Google Chrome i IE 11 działa strasznie - brak płynności.

Ponież kod aniamacji :

[PHP] pobierz, plaintext 
var $document = $(document);
$document.ready(function(){
//////////////////////////////////////////////**			
				var winWidth, winHeight;
				var	$body = $('body'),
					$circle = $('.circle');				
				var R = $circle.width() / 2;
				var C = Math.PI * R * 2;
 
				$(window).on('resize', function(){
 
					winWidth = $(this).width();
					winHeight = $(this).height();
					$body.css('height', C + winHeight);
 
				}).trigger('resize');
 
				var scrolled = false;
 
 
				$document.on('scroll', function(){
 
					var top = $document.scrollTop();
 
					if(top > C - 1){
						$document.scrollTop(1);
					} else if (top == 0 && scrolled) {
						$document.scrollTop(C - 1);
					}
 
					scrolled = true;
 
					var d = ((top / C) * Math.PI * 2) - (Math.PI); 
 
					var x = Math.cos(d) * R;
					var y = Math.sin(d) * R;
 
					$circle.css({
						top: -(R-y) + winHeight/2,
						left: -(R-x) + winWidth/2
					});
 
					////////ułożenie orbit
					$('div#orbita').each(function(){
						$(this).css({
							top: (-(R-y) + winHeight/2)+(($circle.height()-$(this).height())/2),
							left: (-(R-x) + winWidth/2)+(($circle.width()-$(this).width())/2)						
						});
					});
 
				}).trigger('scroll');
 
				/////////////pozycja slajdów
 
				var $things = $circle.children('div:not(.planet)').css('position', 'absolute');	
				var i;
				$things.each(function(i){
 
					var $this = $(this);
 
					var a = (Math.PI * 2 / $things.length) * i;
 
					var x = Math.cos(a) * R;
					var y = Math.sin(a) * R;
 
					$this.css({
						top: y + R - ($this.height() / 2)-20,
						left: x + R - ($this.width() / 2)-20-(winWidth*0.05)
					});
 
				});
 
				///////////////// pozycje planet
 
				function setPos(pozycja, pozycja2, RR, $this){
 
					var a = (Math.PI * 2 / pozycja) * pozycja2;			
					var x = Math.cos(a) * RR;
					var y = Math.sin(a) * RR;
 
					$this.css({
						top: y + RR - ($this.height() / 2),
						left: x + RR - ($this.width() / 2)
					});
 
					setInterval(function(){ 
						if(pozycja2==pozycja){
							pozycja2=0;
						}
							a = (Math.PI * 2 / pozycja) * pozycja2++;			
							x = Math.cos(a) * RR;
							y = Math.sin(a) * RR;
 
							$this.css({
								top: y + RR - ($this.height() / 2),
								left: x + RR - ($this.width() / 2)
							});
 
					}, Math.floor((Math.random() * 10) + 1));
 
				}
 
				var poz = 5000;
 
 
				var $thing = $('.b').children().css('position', 'absolute');	
				$thing.each(function(){
					setPos(poz,Math.floor((Math.random() * poz) + 0), ($('.b').width()/2), $thing);
				});
 
				var $thing = $('.c').children().css('position', 'absolute');	
				$thing.each(function(){
					setPos(poz,Math.floor((Math.random() * poz) + 0), ($('.c').width()/2), $thing);
				});
 
				var $thing = $('.circle').children('.planet').css('position', 'absolute');	
				$thing.each(function(){
					setPos(poz,Math.floor((Math.random() * poz) + 0), ($('.circle').width()/2), $thing);
				});
 
				var $thing = $('.d').children().css('position', 'absolute');	
				$thing.each(function(){
					setPos(poz,Math.floor((Math.random() * poz) + 0), ($('.d').width()/2), $thing);
				});
 
				var $thing = $('.e').children().css('position', 'absolute');	
				$thing.each(function(){
					setPos(poz,Math.floor((Math.random() * poz) + 0), ($('.e').width()/2), $thing);
				});
 
				var $thing = $('.f').children().css('position', 'absolute');	
				$thing.each(function(){
					setPos(poz,Math.floor((Math.random() * poz) + 0), ($('.f').width()/2), $thing);
				});
 
				var $thing = $('.g').children().css('position', 'absolute');	
				$thing.each(function(){
					setPos(poz,Math.floor((Math.random() * poz) + 0), ($('.g').width()/2), $thing);
				});
 
				var $thing = $('.h').children().css('position', 'absolute');	
				$thing.each(function(){
					setPos(poz,Math.floor((Math.random() * poz) + 0), ($('.h').width()/2), $thing);
				});
 
				/////////////////
 
				$(window).bind('resize', function(e){
					window.resizeEvt;
					$(window).resize(function()
					{
						clearTimeout(window.resizeEvt);
						window.resizeEvt = setTimeout(function()
						{
 
							location.reload();
 
						}, 250);
					});
				});
//////////////////////////////////////////////**
///////////// obsluga menu
	$('.menu #menu span:first-child').css({
		'font-size':'16px',
		'font-weight':'bold'
	});	
 
	$('.menu #menu span').click(function(){
		if(open_menu){
			$(".menu").css({'right': "-170px"});
			open_menu=false;
		}
		$('.menu #menu span').css({
			'font-size':'',
			'font-weight':''
		});		
		$(this).css({
			'font-size':'16px',
			'font-weight':'bold'
		});
		var id = $(this).attr('pos');
		$('html, body').stop().animate({
            scrollTop: id
        }, 1000);
	});
 
	var start = [];
	var end =[];
	var arrow_pos=0;
	$('div.menu #menu span').each(function(i){
 
		start[i] = $(this).attr('pos');
		end[i] = $(this).next('span').attr('pos');
		if(!end[i]){
			end[i] = $('body').height();
		}
 
		$document.on('scroll', function(){
 
			if($(this).scrollTop()>=start[i] && $(this).scrollTop()<end[i]){
				$('.menu #menu span:nth-child('+(i+1)+')').css({
					'font-size':'16px',
					'font-weight':'bold'
				});	
				arrow_pos=i;
			}else{
				$('.menu #menu span:nth-child('+(i+1)+')').css({
					'font-size':'',
					'font-weight':''
				});	
			}
		});
 
	});
 
	var open_menu=false;
	$('.menu .mobile_menu').click(function () {
		if(!open_menu){
			$(".menu").css({'right': "-0px"});
			open_menu=true;
 
		}else{
			$(".menu").css({'right': "-170px"});
			open_menu=false;
		}
 
	});
 
	$(document).keydown(function(e) {
 
		if(e.keyCode == 40 || e.keyCode){
			$('html, body').stop().animate({
				scrollTop: start[arrow_pos+1]
			}, 500);
		}
 
		if(e.keyCode == 38 || e.keyCode == 37){
			$('html, body').stop().animate({
				scrollTop: start[arrow_pos-1]
			}, 500);
		}
 
 
	});	
 
	var arrow_keys_handler = function(e) {
		switch(e.keyCode){
			case 37: case 39: case 38:  case 40: // Arrow keys
			case 32: e.preventDefault(); break; // Space
			default: break; // do not block other keys
		}
	};
	window.addEventListener("keydown", arrow_keys_handler, false);
 
	});
////////////////////////
[PHP] pobierz, plaintext 

Będę wdzieczy za pomoc.

Ktoś coś ?