当前位置: 动力学知识库 > 问答 > 编程问答 >

css - Strange position: fixed behaviour on iOS and Chrome (Windows)

问题描述:

I made a website that looks exactly like it should on Firefox but unfortunately not on iOS (which uses Safari webkit) and chrome on some devices of the device. It just doesn't properly display the Menu-Bar (it should be position fixed). The problem here is, that I don't really know what the issue is.

Screenshots:

White space between address bar and photo should be the menu:

Here you see that you only see the menu when it's above the parent

I can't really figure out why it behaves like this, because according to various wikis position fixed is relative to the viewport and not it's parent "the viewport is always their containing block" ( http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Summary )



*The 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 is the parent of the menu

网友答案:

There are so many issues with :position: fixed; on mobile devices/with mobile browsers, that I don't even know where to start.

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

Check Brad Frost's article on the matter and you will see why this is not an easy task to accomplish.

What could help is Filament Group's fixed-sticky-fix: https://github.com/filamentgroup/fixed-sticky

分享给朋友:
您可能感兴趣的文章:
随机阅读: