Safari'de gizemli kenar boşluğu olan sabit başlık

Question

Gelişmekte olduğum bir sitede, kaydırma yaparken büyürken sabit bir menü istiyorum. Chrome ve Firefox'ta mükemmel bir şekilde çalışıyor, ancak safari'yi denediğimde üstte bir boşluk ekliyor.

başlık 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> 
... 

başlık CSS:

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

bu Chrome/Firefox (sağ yön)

görünüyor Ve bu nasıl nasıl Safari'de (yanlış) görünüyor:

... Gördüğünüz gibi, üstünde büyük bir beyaz boşluk var. Ne olduğu hakkında hiçbir fikrim yok. Üstbilgi öğesinin tüm CSS kodunu kaldırırsam, kenar boşluğu kaybolur. Her özelliği ayrı ayrı silmeyi denedim, ancak aynı marjı görmeye devam ediyorum. herhangi bir yardım sadece navbar daima nerede kalınır bilmesi, Menü ye top: 0; eklemem gerekiyor

Answer 1

için

Teşekkürler. Umarım bu yardımcı olur :)