Joy Joy - 1 year ago 73
CSS Question

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

I use

position: fixed
to create a fixed top navigation menu on my mobile web application.

After adding
-webkit-overflow-scrolling: touch
, the scrolling works smoothly. However, the top menu disappears during scrolling. It shows only after the scrolling stops.

I have searched many solutions, such as CSS3 property webkit-overflow-scrolling:touch ERROR and iOS5 Images disappear when scrolling with webkit-overflow-scrolling: touch. However, the given solutions are not working for me. Please check out this example: http://jsbin.com/woxuwihuzu/12/ (visited from iPhone 5c Chrome/Firefox).

Did I miss anything?

Joy Joy
Answer Source

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

I have to limit the height of my content area to be the same height of the screen. Please find the working demo here: http://jsbin.com/tubaqaqumi/3/ (visit from a real phone; a Chrome simulator doesn't tell the difference).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download