奇怪的位置：固定在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