http://workshop.wpcoder.com/daniel/tvexperts/question Weird webkit avec position: fixed
Dans Chrome, si vous cliquez sur "Production" et "Contact" la position: tête fixe disparaît, mais revient lorsque vous déplacez la molette de défilement. Je n'ai aucune idée de la cause, et jusqu'à présent, je ne peux que le détecter dans Safari et Chrome, mais Firefox va bien, donc je pense que c'est un bug de webkit.
En fait, si vous le regardez fermer, dans Firefox a également le même bug. La différence est que là-bas, il montre moins de contenu du lien précédent. Peut-être que votre problème peut être résolu en définissant, en CSS, une valeur min-height pour les divs des liens.
div#contact {
min-height:700px;
height:auto
}
Après un test local j'ai vu le vrai problème :). J'ai créé un correction.css et testé dans Opera 11, Safari 5, Firefox, 3.6, Firefox 4.0 beta 11 et Chrome 9 tout sous Mac OS X. Le fichier a ce contenu:
html, body {height:100%;overflow:auto}/* makes the the magic trick of disappearance, disappear */
#contact {min-height:700px;height:auto}/* makes the contact div h2 closer to the top */
Le réglage de la hauteur a rien pour moi. Le correctif pour le problème avec un élément de position fixe disparaissant dans Chrome pour moi: window.scrollTo(window.pageXOffset,window.pageYOffset-1);
Une méthode de résoudre ce problème est de forcer les éléments à position fixe dans leurs propres couches de rendu. Cela peut être fait en appliquant une transformation 3D, par exemple:
.navbar-fixed-top {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
Espérons que cela aide.
+1 a travaillé pour moi – johnhunter
Les éléments de position fixe sont levés sur une couche composée à la fois dans Blink et WebKit, par défaut. Il n'est pas nécessaire de soulever des éléments de position fixes dans Safari, car ils sont déjà composés.
Ce que vous devez faire est l'inverse. Vous devez soulever tous les non fixes: éléments de position à l'aide translateZ (0):
http://newscentral.exsees.com/item/528d72c6d22fab46e4eb18e5cb8fece0-0d5a1eca143f58f995dc015e265514cb
Si vous souhaitez résoudre ce problème, vous pourriez vouloir cacher et montrer le corps complet afin de le forcer à redessiner le tout. – pimvdb
Je ne sais pas ce que tu veux dire, pimvdb. – Daniel
Après avoir appuyé sur le lien Contact, vous pouvez exécuter ceci: 'window.scrollTo (window.pageXOffset, window.pageYOffset-1)'. Il fait défiler votre page d'un pixel vers le haut, ce qui résout la disparition de l'en-tête. (Ma première suggestion était erronée, désolé.) – pimvdb