Fixed Header mit mysteriösen Rand in Safari

Question

In einer Website, die ich entwickle, möchte ich ein festes Menü auf der Oberseite, die wächst, wenn ich blättern. Es funktioniert perfekt auf Chrome und Firefox, aber wenn ich auf Safari versuche, fügt es eine Marge an der Spitze hinzu.

Der Header HTML:

<div id="top-background"> 
    <div id="top-menu"> 
     <header class="large"> 
      <nav><img class="logo" src="img/logo-color-solo.png"/> 
      <ul class="menu"> 
       <li><span><a data-scroll href="#de-que-se-trata">¿De qué<br/>se trata?</a></span></li> 
       <li><span><a data-scroll href="#beneficios">¿Cuáles son<br/>los beneficios?</a></span></li> 
       <li><a data-scroll href="#como-se-usa"><span>¿Cómo se usa?</a></span></li> 
       <!--<li><a href="#"><span>¿Cuáles son las<br/>membresías?</a></span></li>--> 
       <li><a data-scroll href="#unete"><span>Únete</a></span></li> 
      </ul> 
      </nav> 
     </header> 
    </div> 
... 

Die CSS-Header:

header{ 
    background-color: rgba(255, 255, 255, 0.95); 
    border-bottom: 1px solid #aaaaaa; 
    float: left; 
    width: 100%; 
    position: fixed; 
    z-index: 10; 
} 

dies ist, wie es aussieht auf Chrom/Firefox (der richtige Weg)

Und so es sieht auf Safari (falsch) aus:

... wie Sie sehen können, gibt es oben einen großen weißen Rand. Keine Ahnung was es ist. Wenn ich den gesamten CSS-Code des Header-Elements entferne, verschwindet der Rand. Ich habe versucht, jede Eigenschaft einzeln zu löschen, aber ich sehe immer noch den gleichen Abstand.

Thanx für jede Hilfe

Answer 1

Sie müssen nur top: 0; zum navbar hinzuzufügen, so dass der navbar immer weiß, wo zu bleiben. Hoffe das hilft :)