L'élément fixe disparaît dans Chrome
Lors du défilement sur un site Web que j'ai créé, l'utilisation de la propriété CSS position: fixed fonctionne normalement pour garder une barre de navigation tout en haut de la page.
Dans Chrome, toutefois, 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, tout disparaît. Déplacer la souris ramène une partie de l'élément et défiler avec la molette de défilement ou les touches fléchées d'un simple clic ramène l'élément. Vous pouvez le voir se produire (de manière intermittente) sur http://nikeplusphp.org - vous devrez peut-être cliquer plusieurs fois sur les liens de navigation 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 le correctif n'a pas fonctionné pour moi du tout. Cela semble être un problème de Webkit, car IE et Firefox fonctionnent parfaitement.
S'agit-il d'un problème connu ou existe-t-il un correctif permettant de garder les éléments fixes visibles?
Mettre à jour:
Seuls les effets des éléments qui ont top: 0;, j'ai essayé bottom: 0; et cela fonctionne comme prévu.
Il s'agit d'un problème de 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 saute à celle-ci:
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 cela davantage et faire en sorte que seul le système recherche uniquement les liens commençant par #, plutôt que jamais la balise a qu'il trouve.
Ajoutez -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 étrange.
J'ai créé un bogue Chrome pour ce problème https://bugs.chromium.org/p/chromium/issues/detail?id=288747 . Merci de l'afficher afin que cela puisse attirer l'attention.
Cela corrige cela pour moi:
html, body {height:100%;overflow:auto}
J'avais le même problème avec Chrome. Il semble que ce soit un problème qui survient lorsqu'il y a trop d'activités dans la page. J'ai pu le résoudre en ajoutant le code de transformation suivant à l'élément à position fixe, (transform: translateZ(0);-webkit-transform: translateZ(0);) qui oblige le navigateur à utiliser l'accélération matérielle pour accéder à l'unité de traitement graphique (GPU) du périphérique afin de faire voler des pixels. Les applications Web, en revanche, s'exécutent dans le contexte du navigateur, ce qui permet au logiciel de rendre la plupart (sinon la totalité) du rendu, ce qui réduit la puissance des transitions. Mais le Web est en train de rattraper son retard et la plupart des éditeurs de navigateurs fournissent désormais une accélération matérielle graphique au moyen de règles CSS particulières.
Utilisation de -webkit-transform: translate3d (0,0,0); va lancer le GPU en action pour les transitions CSS, en les rendant plus fluides (FPS plus élevé).
Remarque: translate3d (0,0,0) ne fait rien de ce que vous voyez. il déplace l'objet de 0px sur 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 je mélange deux des solutions fournies.
En ajoutant ce qui suit à l'élément fixe, cela a fonctionné. Fondamentalement, z-index était aussi nécessaire pour moi:
-webkit-transform: translateZ(0);
z-index: 1000;
Si cela ne fonctionne pas après avoir ajouté
-webkit-transform: translateZ (0)
que d'ajouter aussi
modulable par l'utilisateur = non
sur la méta de viewport
source ici
ça a fonctionné pour moi
J'ai rencontré le même problème dans un cas différent. C'était à cause de l'utilisation du même identifiant à plusieurs endroits. Par exemple, j'ai utilisé #full 2 divs.
Il semble que Mozilla et I.E. prend en charge l'utilisation du même identifiant dans plusieurs cas. Mais le chrome ne le fait pas. Il a réagi avec l'élément fixe disparaissant dans mon cas.
Le simple fait de supprimer les identifiants a résolu le problème.
Aucun d’entre eux n’a fonctionné pour moi si ce n’est 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>
À part cela, aucune des solutions ci-dessus n'a résolu mon problème.
Et si rien de ce qui précède ne fonctionnait du tout? simple cas d'en-tête collant + menu latéral mobile poussant le contenu.
J'essaie de trouver un moyen d'éviter la traduction d'un élément fixe (collant en-tête), mais dans ce cas, rien ne constitue une bonne alternative.
Donc, comme il n’existait pas de solution de contournement sur le champ d’application, j’ai opté pour une alternative JS pour recalculer la position absolue de l’élément fixe. Voir ici: https://stackoverflow.com/a/21487975/2012407
Cela a fonctionné pour moi. Ajoutez la propriété Overflow à votre conteneur le plus élevé, qui peut être Div ou Form, etc.
div, form
{
overflow:visible;
}
Si aucune des réponses ci-dessus ne vous convient, assurez-vous que vous n'êtes pas un mannequin comme moi et que vous avez overflow: hidden; placé sur l'élément fixe :(