Mobile network: -webkit-overflow-scrolling: touch conflicts with position: fixed

I use position: fixedto create a fixed main navigation menu in a mobile web application.

After adding, -webkit-overflow-scrolling: touchscrolling works smoothly. However, the top menu disappears while scrolling. It is displayed only after stopping scrolling.

I searched for a lot of solutions, such as CSS3 property webkit-overflow-scrolling: touch ERROR and iOS5 Images disappear when scrolling using webkit overflow scroll: tap . However, these solutions do not work for me. Please check out this example: http://jsbin.com/woxuwihuzu/12/ (visited with iPhone 5c Chrome / Firefox).

Did I miss something?

+4
source share
1 answer

After two days of struggle, I found this post that saves me: 100% css screen height .

I need to limit the height of the content area to the same screen height. The following is a working demo: http://jsbin.com/tubaqaqumi/3/ (visiting a real phone, the Chrome sim doesn't talk about the difference).

+2
source

All Articles