Problemas com transition no chrome

[cristianobcn 1]

Oi pessoal o problema é o seguinte.

 

Tenho alguns efeitos transition no css que são para acontecer com o click dos botões. Só que no chrome eles acontecem junto com carregamento da pagina saindo do topo e descendo.

 

Acessem o site e cliquem em empresa e home no firefox e no chrome pra voces verem.

 

http://www.cristianocarvalho.com/clientes/roana/

 

Segue abaixo o codigo

 

@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Bubbler+One);
/*font-family: 'Bubbler One', sans-serif;*/
@import url(http://fonts.googleapis.com/css?family=Zeyada);
/*font-family: 'Zeyada', cursive;*/
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans);
/*font-family: 'Josefin Sans', sans-serif;*/
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	width:100%;
	height:100%;
	overflow:hidden;
}
#bg1{
	background-image:url(../images/fundo_index.jpg);
	background-repeat:no-repeat;
	background-position:top center;	
	width:100%;
	height:100%;
	position:absolute;
	z-index:1;
	opacity:1.0;
	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#bg2{
	background-image:url(../images/fundo_empresa.jpg);
	background-repeat:no-repeat;
	background-position:top center;	
	width:100%;
	height:100%;
	position:absolute;
	z-index:1;
	opacity:0.0;
	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#bailarina{
	height:100%;
	position:absolute;
	right:0;
	z-index:2;
		-moz-transition: all 1.5s ease ;
	-webkit-transition: all 1.5s ease ;
	-o-transition: all  1.5s ease ;
	transition: all 1.5s ease ;

}
#foto-inicio{
	position:absolute;
	width:100%;
	height:60%;
	margin: 0 auto;
	text-align:center;
	top:140px;
	z-index:2;
	-moz-transition: all 2.0s ease;
	-webkit-transition: all 2.0s ease;
	-o-transition: all 2.0s ease;
	transition: all 2.0s ease;	
	}	
#foto-inicio h1{
font-family: 'Zeyada', cursive;
	font-size:3.0em;
	color:#AA9C64;
	font-weight:normal;
	margin-top: -20px;	
}
#fotoempresa{
	position:absolute;
	right:-1000px;
	top:70px;
	width:30%;
	z-index:3;
	-moz-transition: all 2.5s ease;
	-webkit-transition: all 2.5s ease;
	-o-transition: all 2.5s ease;
	transition: all 2.5s ease;
}
#menu1{
	width:100%;
	position:absolute;
	top:80px;
	text-align:center;
	z-index:3;

}
#menu1 li{
	list-style:none;
	display:inline;
	padding-left:10px;
	padding-right:10px;
	font-family: 'Josefin Sans', sans-serif;
	color:#630;
	font-size:1.5em;

}
#menu1 li a{
	color:#630;
	text-decoration:none;		
}
#logo{
	width:200px;
	position:absolute;
	left:30px;
	top:30px;
	z-index:2;
}

 

 

 

[Diéssica 140]

O Chrome tem esse comportamento excêntrico com CSS3 transitions quando a regra é global, ou seja, quando o [inline]all[/inline] é valor, pois este determina que todas as propriedades do elemento sofrerão transição quando houver alteração em seu estado padrão - e é exatamente assim, ao pé da letra, que é interpretado pelos navegadores webkit. Outros navegadores, como o Firefox, não fazem isso e esperam por uma interação maior do usuário para então aplicar a transição. Em palavras básicas é isso. :)

Pelo que analisei, o que está sofrendo transição é a seguinte declaração:

background-position: top center;

O background está inicialmente com seu valor padrão (0%) e sofre transição ao alterar sua posição, de valor [inline]top center[/inline].

Para solucionar, você pode limitar a transição somente às propriedades específicas que são alteradas - que, até onde vi no JavaScript, são opacity e right:

transition: opacity 0.5s ease, right 0.5s ease;

:bye: