En-tête fixe "saute" dans Google Chrome
http://fundamentaldesigns.us/normal/
Je suis le développement d'un site et j'ai rencontré un problème que je n'ai jamais eu avant. J'ai un en-tête qui a fixé le positionnement et un haut de z-index. Les sections ci-dessous ont le positionnement relatif de sorte que je peux la position des éléments à l'intérieur d'eux absolument.
L'en-tête "sauts" autour de lors du défilement dans google chrome. J'ai compris que si je supprime le z-index, il résout le problème de saut, mais il ne montre pas devant les autres éléments. Quel est le truc ici?
HTML
<header>
<div class="inner">
<img src="images/logo.png" alt="Normal Public Library Foundation" class="logo">
<nav>
<ul>
<li><a href="#whatif">Home</a></li>
<li><a href="#">2014 Goals</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">Donate</a></li>
</ul>
</nav>
</div>
</header>
<div class="whatif section" id="whatif">
<div class="inner">
<h1>What if there was no library?</h1>
<a href="#circulation" class="animated bounce"><img src="images/scroll-arrow.png" alt=""></a>
</div>
</div>
CSS
header {
position: fixed;
top:0;
width: 100%;
padding: 20px 0;
background-color: #FFF;
opacity: 0.9;
z-index: 999;
-webkit-box-shadow: 0px 1px 7px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 1px 7px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 1px 7px 0px rgba(50, 50, 50, 0.75);
.logo {
float: left;
}
nav {
float: right;
margin:8.5px 0;
ul {
list-style-type: none;
padding: 0;
margin: 0;
li {
display:inline;
font-size: 14px;
line-height: 20px;
padding: 0 30px;
text-transform: uppercase;
}
}
}
}
.section {
height: 800px;
position: relative;
.next {
position:absolute;
bottom: 75px;
left:50%;
color: #f5f2dc;
padding: 5px 12px;
border-radius: 3px;
background-color: #454545;
opacity: .5;
margin-left: -28px;
&:hover {
background-color: #565656;
color: #FFF;
}
}
}
source d'informationauteur Craig Harshbarger
Vous devez vous connecter pour publier un commentaire.
Ce type de problème de Chrome est généralement atténué par l'ajout du code CSS suivant déclaration sur l'
fixed
élément.Cette astuce appelle l'accélération matérielle et améliore les performances.
Je ne sais pas pourquoi, ni comment cela fonctionne, mais j'ai fait ce que Marcel ajoutée, et qui n'a pas résolu mon problème.
Donc je l'ai ignoré et suis allé à mon prochain problème de l'utilisateur de zoomer et ajouté cette balise meta:
Une fois j'ai ajouté que je n'avais pas ce problème plus.