L'élément fixe disparaît dans le Chrome
en faisant défiler sur un site Web que j'ai construit, en utilisant la propriété CSS position: fixed fonctionne comme prévu pour garder une barre de navigation en haut de la page.
dans 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. Déplacer la souris ramène une partie de l'élément, et défiler avec le la roue de défilement ou les touches fléchées juste un clic ramène l'élément en arrière. Vous pouvez le voir se produire (de manière intermittente) sur http://nikeplusphp.org - vous pourriez devoir cliquer sur quelques-uns de la navigation les liens à quelques reprises pour le voir se produire.
j'ai également essayé de jouer avec le z-index et le type de visibilité/affichage, mais sans succès.
je suis tombé sur cette question mais que le correctif n'a pas fonctionné pour moi. Sembler être un problème de webkit comme IE et Firefox fonctionne très bien.
Est-ce un problème connu ou est-il un correctif pour garder les éléments fixes visibles?
mise à jour:
n'affecte que les éléments qui ont top: 0; , j'ai essayé bottom: 0; et cela fonctionne comme prévu.
11 réponses
ajouter -webkit-transform: translateZ(0) à l'élément position: fixed . Cela oblige Chrome à utiliser l'accélération matérielle pour peindre en continu l'élément fixe et éviter ce comportement bizarre.
j'ai créé un bug Chrome pour ce https://bugs.chromium.org/p/chromium/issues/detail?id=288747 . S'il vous plaît, démarrez-le pour que ça attire l'attention.
j'avais le même problème avec Chrome, il semble que ce soit un bug qui se produit quand il y a trop de choses à l'intérieur de la page, j'ai pu le corriger en ajoutant le code de transformation suivant à l'élément de position fixe, ( 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 de l'appareil (GPU) pour faire voler les pixels. Les applications Web, d'autre part, fonctionnent dans le contexte du navigateur, qui laisse le logiciel faire la plupart (si pas tous) de la Rendu, résultant en moins de puissance pour les transitions. Mais le Web a rattrapé son retard, et la plupart des fournisseurs de navigateur fournissent maintenant l'accélération matérielle graphique au moyen de règles CSS particulières.
utilisant-webkit-transform: translate3d (0,0); va lancer le GPU en action pour les transitions CSS, les rendant plus lisses (FPS plus élevés).
Note: translate3d(0,0) ne fait rien en termes de ce que vous voyez. il permet de déplacer l'objet par 0px dans les axes x,y et Z. Ce n'est qu'une technique pour forcer 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);
}
les options ci-dessus ne fonctionnaient pas pour moi jusqu'à ce que j'ai mélangé deux des solutions fournies.
en ajoutant ce qui suit à l'élément fixe, il a fonctionné. Fondamentalement z-index était également nécessaire pour moi:
-webkit-transform: translateZ(0);
z-index: 1000;
il s'agit d'un problème webkit qui n'a pas encore été résolu, faire le saut avec JavaScript, plutôt que d'utiliser la valeur url # , ne cause pas le problème. Pour surmonter le problème, j'ai fourni une version JavaScript qui prend la valeur d'ancrage et trouve la position absolue de l'élément avec cet ID et sauter à cela:
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;
}
}
je pourrais affiner davantage et faire il est que seulement il cherche des liens commençant par un # , plutôt que jamais a étiquette qu'il trouve.
j'ai rencontré la même question dans une autre affaire. C'était à cause de l'utilisation du même id en plusieurs endroits. Pour exemple, j'ai utilisé #2 divs.
il semble que mozilla et I. E. supportent l'usage de la même id dans plusieurs cas. Mais chrome n'est pas. Il a réagi avec des éléments fixes désapprobateurs dans mon cas.
j'enlève juste l'identification a résolu le problème.
si elle ne fonctionne pas après l'ajout de
- webkit-transform: translateZ (0)
que Ajouter également
modulable par l'utilisateur=no
sur la fenêtre d'affichage des méta
source ici
il a travaillé pour moi
aucun d'entre eux n'a fonctionné pour moi sauf appeler le modal 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.
si aucune des réponses ci-dessus n'a fonctionné pour vous, assurez-vous que vous n'êtes pas un mannequin comme moi et avoir overflow: hidden; set on the fixed element : (
et si aucune de ces réponses ne fonctionnait? cas simple d'en-tête sticky + menu latéral mobile poussant le contenu.
j'essaie de trouver un moyen d'éviter la traduction d'éléments fixes (en-tête sticky) mais dans ce cas rien n'est une bonne alternative.
donc, comme il n'y a pas de solution de rechange sur la portée jusqu'à présent, il y a une alternative JS que j'ai choisi de recalculer la position absolue de l'élément fixe. Voir ici: https://stackoverflow.com/a/21487975/2012407
ça a marché pour moi . Ajouter Overflow propriété à votre conteneur le plus haut qui peut être Div ou forme etc.
div, form
{
overflow:visible;
}