Quelle ne fut pas ma surprise en testant mon site sous Chrome: c'est vraiment laid ! Pourquoi?

J'ai une div au centre. J'utilise un "animate" qui change "height" à 0,"top" à 1000px, et "opacity" à 0.

Le but est de la faire descendre tout en disparaissant. Firefox, le p'tit chouchou de ma classe, fais ca très bien depuis le début. Chrome, le cancre du fond, a décidé de faire comme ca: dès que je lui parle de "top", il semble d'abord mettre "top" à 0 et puis de faire mon animate . Donc la div se retrouve subitement tout en haut, puis descend. Le résultat est moins bien que s'il n'y avait pas d'animation...

J'ai essayé de lui rappeler que "top" valait 50% avant de commencer, sans succès. J'ai essayé de mettre la position de ma div sur "relative" plutot que absolute, mais toujours rien.

J'ai cheché sur le net si les différents browsers réagissaient différement à la propriété "top", mais apparement pas.
Quelqu'un a-t-il une idée?

Merci d'avance!

Si tu pourrais poster un peu de code sa serais chouette pour t'aider

Oui, oui, voilà.

La div qui doit bouger:

<div id="rideau">
  </div>

Sa CSS:

#rideau
{position: absolute;
top:50%;
   margin-top:-275px;
   left:50%;
   margin-left:-341px;
width: 681px;
height: 551px;
opacity:0;
z-index: 4;
background-image: url("images/grandfond1.png");

background-repeat: no-repeat;
color: white;
}

Elle est animée par le script suivant:

setTimeout (function()
	{
     $("#rideau").animate({
	 
	height: 0,
	top: 1000,
	opacity: 0.5
    },700,"linear")
    },2200);

A noter que: Safari se comporte comme Chrome, et Opéra comme Firefox.

Merci de me consacrer de ton temps. Bonne journée!

Salut,

pour Chrome (et Safari sans doute), tu peux mettre la valeur du top en %, pour éviter le bug

Exellent! Oui, ca marche. J'avais trouvé une autre solution, mais je ne pouvais pas la poster parceque mon précedent message datait de moins d'1 jour.

Voilà ce que j'ai découvert : pour les navigateurs utilisant webkit, lorsqu'on fait un animate sur certaines propriétés ( les propriétés de position c'est sur, les autres j'ai pas testé), il ramène d'abord la valeur à zéro puis opère l'animation!!!

C'est pourquoi j'avais le probleme cité plus haut. La solution consiste à mettre la div à animer dans une nouvelle div, positionnée au meme endroit. De cette manière, la div à animer se trouve déja en "position zéro", et le décalage opéré par webkit n'a donc aucun effet!

Mais, évidemment, c'est plus laborieux que de changer en %....

Bon, ben j'ai deux solutions. Je crois qu'à l'avenir je prendrai la tienne...
Merci micledowski