Élément fixe disparaît dans Chrome

Lors du défilement sur un site que j'ai construit, à l'aide de la propriété CSS position: fixed fonctionne comme prévu à garder une barre de navigation en haut de la page.

En Chrome, cependant, si vous utilisez les liens dans la barre de navigation, il parfois disparaît. Généralement, l'élément sur lequel vous avez cliqué est toujours visible, mais pas toujours. Parfois, la chose entière disparaît. Le déplacement de la souris autour de apporte de la partie arrière de l'élément, et le défilement avec la molette de défilement ou les touches fléchées en un seul clic apporte l'élément arrière. Vous pouvez voir qu'il se passe (intermitently) sur http://nikeplusphp.org - vous pourriez avoir à cliquer sur un peu de navigation, les liens un peu de temps de la voir arriver.

J'ai aussi essayé de jouer avec les z-index et la visibilité/type d'affichage, mais avec pas de chance.

Je suis tombé sur cette question mais que le correctif n'a pas fonctionné pour moi. Semble être une webkit question que IE et Firefox fonctionnent tout aussi bien.

Est-ce un problème connu ou est-il un correctif pour garder les éléments fixes visibles?

Mise à jour:

Seulement des effets des éléments qui ont top: 0;, j'ai essayé bottom: 0; et qui fonctionne comme prévu.

Je me demande si c'est lié à une ce problème...
Merci pour le lien, j'ai contribué à le thread, mais vous vous demandez encore si il y a un moyen de contourner le problème.
Drôle, j'ai exactement le contraire de problème où top:0 affiche de l'élément, mais bottom:0 ne le fait pas. Malheureusement aucune de ces réponses fixer soit.
Juste une note de côté, votre page est en train d'essayer de charger des scripts dangereux (protocole HTTP), tandis que le protocole habituel pour votre page HTTPS. Vous devriez probablement corriger que c'est un problème de sécurité, et les principaux navigateurs (chrome) ne sont pas charger les scripts d'abord, qui peut briser votre page
merci, cette question a été posté bien avant que j'ai basculé en HTTPS mais on dirait que quelque chose a changé. L'examinera.

InformationsquelleAutor cchana | 2012-06-29

196

Ajouter -webkit-transform: translateZ(0) à la position: fixed élément. Cette forces de Chrome pour utiliser l'accélération matérielle en permanence de la peinture à l'élément fixe et d'éviter ce comportement bizarre.

J'ai créé un Chrome bug pour cette https://bugs.chromium.org/p/chromium/issues/detail?id=288747. Veuillez star donc cette pouvez obtenir un peu d'attention.
- J'ai du mal avec ce bug pendant plusieurs heures, vous m'avez sauvé. Ce doit être la accepté de répondre! Merci.
- Cela a fonctionné pour moi, j'ai eu le problème sur Chrome/Win, pas sur Chrome/Ubuntu, par la manière.
- Est venu ici de google après des jours d'aller mentale sur cette question. Je pensais que c'était un de mes mal écrit en javascript à l'origine du problème, dans mon cas, mais il fixe tout. Merci beaucoup!
- En fait j'ai eu ce même problème se produisant avec un élément en position absolue, et ce aussi fixe que.
- Merci, vous avez fait ma journée! Je suppose que ce bug est lié à l'empilement des contextes. Dans Chrome 22 la mise en page le comportement de position:les éléments fixes est légèrement différent de celui des versions précédentes. Toutes les positions:fixe les éléments maintenant la forme de nouveaux contextes d'empilement. updates.html5rocks.com/2012/09/...
- Je ne pouvais pas utiliser cette solution parce que j'ai été en s'appuyant sur z-valeurs de l'indice de l'élément et de ses parents. Retrait de la mère de z-index valeur résolu pour moi.
- Ce correctif fonctionne aussi, quand un parent a position:relative et ses enfants peuvent partiellement disparaître sur l'actualisation de la page. Je vous remercie et les rayons de... eh bien, la surprise de Chrome =)
- Seulement environ un an après cette réponse et j'ai toujours couru dans la même émission en Chrome 37 sur Mac avec un site que je suis en train de travailler sur. Merci pour cette réponse. Il a été me rend fou ce qui s'est passé dans Chrome, mais pas sous Firefox! Boo-urnes pour le Chrome de l'équipe pour ne fixant pas encore!
- Le Bug est toujours là dans Chrome38/OSX et cette réponse fonctionne toujours.
- Constaté ce problème, Chrome 41.0.2224.3 la réponse a résolu le problème. Merci!
- Ce bug semble encore présente dans la Version Chrome 46.0.2490.71 (64-bit). De toute façon, ce correctif a travaillé pour moi et m'a sauvé des heures.. merci!
- VanToll: il fonctionne, mais pas du tout pour moi. J'ai eu ce problème avec un bootstrap navigationbar <nav>. Si j'ai mis cet attribut, je peux voir le bar au-dessus de tout, mais je ne peux pas cliquer sur tout les liens et les boutons à l'intérieur si la barre n'est plus un élément HTML. Si je n'avais pas l'utilisation de ce bien et j'ai redimensionner la fenêtre jusqu'à ce que la barre de navigation de l'effondrement, il fonctionne! Mais si je l'ai ré-ouvert les fenêtres de bureau standard dimension, le bug est toujours là. Plus d'informations, visitez la question que j'avais posée here. Merci
- J'ai passé des heures sur ce problème. Je travaillais sur un CSS en-Tête Fixe Solution qui fonctionnait très bien dans tous les Navigateurs, sauf Chrome... en ajoutant cette ligne fixe le problème. Merci!
- Intéressant, cela ne résout pas pour moi. La Version Chrome 48.0.2564.82 (64-bit), Mac OS X Yosemite 10.10.3)
- Intéressant - ce qui A fonctionné pour moi (même si ma version était très similaire à @Razroo Chef): google Chrome Version 48.0.2564.116 (64-bit), Mac OS X Mavericks 10.9.2. Je travaille aussi sur un en-tête fixe solution.
- malheureusement, il ne fonctionne pas pour moi sur Chrome 48.0.2564.116 sur ubuntu 🙁
- Ce correctif a fonctionné pour moi sur Chrome 50.0.2661.102 (64 bits), mac OSX, mais maintenant, une fois que défiler les éléments en dessous de recevoir le survolez et cliquez sur les interactions. Quelqu'un d'autre a rencontré ce problème?
- Commutation de translateZ de translate3d correction du problème que je viens de mentionner ci-dessus!
- beaucoup plus élégante que la réponse sélectionnée, merci.
- Le moment où une réponse parfaite vous fait vous demander ce que vous auriez fait si stackoverflow n'existe pas!
- Comment il a été de nombreuses années et c'est encore un bug, merci pour la réponse!
InformationsquelleAutor TJ VanToll
44

Cette correctifs pour moi:
```
html, body {height:100%;overflow:auto}
```
- C'est une très mal à l'aise de se poser la question agaisnst un code de base de millions de lignes...mais bon ça marche!!!!!!! MERCI
- La réponse ci-dessus ne fonctionne pas pour moi, mais ce n'. Merci 🙂
- Ce fixe pour moi. J'ai eu ce problème plusieurs fois, et généralement il est fixé par le présent. Il ne se produit que sur un périphérique réel et à chaque fois il me fait me demander si c'est quelque chose avec un balayage.
- ce qu'il est corrigé pour moi, tandis que @TJ VanToll la réponse n'est pas
- Je suis en utilisant des éléments absolus, et ils disparaissent au hasard montrant des boîtes blanches où ils devraient l'être (son espace est préservé, mais ils apparaissent comme zone blanche!) une fois que vous cliquez sur l'un d'entre eux (même si ce n'est un élément cliquable) qu'ils réapparaissent! il semble donc être un problème de rendu de la sorte! Je suis encore en test après l'ajout de cette, mais je pense que cela a fonctionné pour ceux absolue éléments de trop! ils désormais s'afficher correctement, pas d'espaces blancs (du moins pas encore). Je n'ai aucune idée de pourquoi cela a aidé non plus! été mal pour un bien que! Merci!!!!!
- J'ai aussi été confronté au problème avec des éléments fixes sur Chrome, j'ai pensé qu'il était JS-connecté, parce que les éléments fixes étaient en voie de disparition sur la transition des diapositives, mais elle a effectivement résolu le problème.... bizarre!!! overflow:auto était assez pour moi.
- Ce qui fait que la fixe div arrêter de bouger avec les mobiles barre d'url pour moi, mais ensuite foiré autres parties de la page, à savoir qu'il a perturbé mes JS sur le défilement de l'auditeur
InformationsquelleAutor Cooper
18

J'ai eu le même problème avec google Chrome, il semble être un bug qui se produit quand il y a trop de choses à l'intérieur de la page, j'ai été en mesure de le réparer par adjonction, transformer le code de la position fixe de l'élément, (transform: translateZ(0);-webkit-transform: translateZ(0);) qui force le navigateur à utiliser l'accélération matérielle pour accéder à l'unité de traitement graphique (GPU) pour rendre les pixels de la mouche. Les applications Web, d'autre part, s'exécutent dans le contexte du navigateur, ce qui permet au logiciel de faire la plupart (si pas tous) de l'rendu, ce qui entraîne moins de puissance pour les transitions. Mais la Web a été rattraper, et la plupart des fournisseurs de navigateur maintenant fournir graphique de l'accélération matérielle par le biais de particulier de règles CSS.

Aide -webkit-transform: translate3d(0,0,0); donnera un coup de pied le GPU en action pour le CSS transitions, les rendant plus souple (plus grand FPS).

Remarque: translate3d(0,0,0) ne fait rien en termes de ce que vous voyez. il permet de déplacer l'objet par 0px en x,y et z de l'axe. C'est seulement une technique à la force de l'accélération matérielle.
```
#element {
    position: fixed;
    background: white;
    border-bottom: 2px solid #eaeaea;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9994;
    height: 80px;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
```
InformationsquelleAutor Neo
7

Les options ci-dessus n'ont pas de travail pour moi jusqu'à ce que j'ai mélangé deux des solutions fournies.

Par adjonction de l'élément fixe, il a travaillé. Fondamentalement, le z-index est également nécessaire pour moi:
```
-webkit-transform: translateZ(0);
z-index: 1000;
```
- Cette solution a fonctionné pour moi aujourd'hui. Chrome 45 est sorti et mon site a un (position: fixed) question. L'ajout de la (-webkit-transform: translateZ(0) semble avoir fixé. (Je suis conscient de la z-index, trop, mais mon site a déjà un z-index établi pour les affligés éléments.)
- -webkit-transform: translateZ(0); a fait pour moi. N'a pas besoin d'utiliser les z-index.
InformationsquelleAutor cortopy
2

C'est un webkit question qui n'a pas encore été résolu, curieusement de faire le saut avec le JavaScript, plutôt que d'utiliser le # url valeur, n'est-ce pas la cause de ce problème. Pour surmonter le problème, j'ai fourni une version JavaScript qui prend la valeur d'ancrage et trouve que la position absolue de l'élément avec l'ID et sauter à:
```
var elements = document.getElementsByTagName('a');
for(var i = 1; i < elements.length; i++) {
    elements[i].onclick = function() {
        var hash = this.hash.substr(1),
            elementTop = document.getElementById(hash).offsetTop;
        window.scrollTo(0, elementTop + 125);
        window.location.hash = '';
        return false;
    }
}
```
J'ai pu affiner encore ce que cela et le faire c'est qu'il ne regarde que pour les liens commençant par un #, plutôt que jamais a balise qu'il trouve.

InformationsquelleAutor cchana
2

Si elle ne fonctionne pas après l'ajout de

-webkit-transform: translateZ(0)

que également ajouter

user-scalable=no

sur meta viewport

source ici

il a travaillé pour moi

InformationsquelleAutor GentiElezaj
1

J'ai rencontré le même problème dans un autre cas. C'était à cause de l'utilisation de la même id dans plusieurs endroit. Pour exemple, j'ai utilisé #2 divs.

Il semble que mozilla et I. E. prend en charge l'utilisation de la même id dans plusieurs cas. Mais chrome n'est pas. Il a réagi avec élément fixe disappering dans mon cas.

De simplement enlever les id résolu le problème.

InformationsquelleAutor Ritesh Jung Thapa
1

N'a pas fonctionné pour moi, en dehors de l'appel de la modale via javascript
```
<a href="#\" onclick="show_modal();">Click me to open MyModal</a>
<script>
function show_modal()
{
  MyModal.style.display = 'block';
}
</script>
```
autre que cela, aucune des solutions ci-dessus n'a résolu mon problème.

InformationsquelleAutor maslan
0

Si aucune des réponses ci-dessus a travaillé pour vous, assurez-vous que vous n'êtes pas un mannequin comme moi et que vous avez overflow: hidden; défini sur l'élément fixe 🙁
- Drôle ajout de débordement cachés de la transformZ corriger le travail pour moi! lol
InformationsquelleAutor Angelika Johansson
0

Que si aucun des ci-dessus a travaillé à tous? cas simple des collants en-tête + mobile le menu de gauche poussant le contenu.

J'essaie de trouver un moyen pour éviter l'élément fixe (collant en-tête) en cours de traduction, mais dans ce cas, rien n'est une bonne alternative.

De sorte qu'il n'y a pas de solution de rechange à portée jusqu'à présent, il est un JS alternative que j'ai opté pour recalculer la position absolue de l'élément fixe. Voir ici: https://stackoverflow.com/a/21487975/2012407

InformationsquelleAutor antoni
0

Cela a Fonctionné pour moi . Ajouter Overflow propriété à votre plus haut récipient Div ou de la Forme etc.
```
div, form
{
  overflow:visible;    
}
```
InformationsquelleAutor kumar chandraketu

Vous devez vous connecter pour publier un commentaire.