奇怪的位置：固定在iOS和Chrome上的行爲（Windows）

Question

我做了一個網站，看起來應該在Firefox上，但不幸的是沒有iOS（使用Safari WebKit）和設備的某些設備上的鉻。它只是不正確顯示菜單欄（它應該固定位置）。這裏的問題是，我真的不知道問題是什麼。

截圖：地址欄和照片之間
白色空間應該是菜單：

這裏可以看到，你只看到菜單時，它的父上述

我可以」不知道爲什麼它的行爲是這樣的，因爲按照各種維基位置固定是相對於視口而不是它的父「視口始終是它們的包含塊」（http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Summary）

*的CSS：

.main-navigation { 
    clear: both; 
    float: left; 
    width: 100%; 
    position: fixed; 
    width: 100vw; 
    height: 6rem; 
    background: -webkit-linear-gradient(top, #fff, #d6d6d6); 
    background: -moz-linear-gradient(top, #fff, #d6d6d6); 
    background: -ms-linear-gradient(top, #fff, #d6d6d6); 
    background: -o-linear-gradient(top, #fff, #d6d6d6); 
    top: 0; 
    right: 0; 
    z-index: 100; 
    overflow: visible; 
} 
nav { 
    display: block; 
} 
.home header.site-header { 
    top: 24rem; 
    left: 8rem; 
    position: absolute; 
    z-index: 3; 
} 

.home header.site-header是菜單的父

Answer 1

有在移動設備上使用:position: fixed;這麼多的問題/與移動瀏覽器，我甚至不知道從哪裏開始。

http://bradfrost.com/blog/mobile/fixed-position/

檢查布拉德·弗羅斯特對此事的文章，你就會明白爲什麼這不是一個容易的任務來完成。

有什麼能幫忙的長絲組的固定粘修復： https://github.com/filamentgroup/fixed-sticky