It is impossible to have an element fixed in CSS on the page in the mobile Webkit browser. When you are surfing on your phone, webkit opens the page completely and acts as a viewport.
"Imagine a book in front of you. Take a piece of paper, cut a 320*416 square in it, and lay it over the book. To read the book, move the paper around and position the hole over the words you want to see." -Richard Herrera
To create better mobile applications and websites, we need fixed positionning to give the user better tools to browse the web on handled devices. Like a real mobile app, we could have a fixed toolbar when scrolling on a site, it is critical to not take the user in hostage in very long list or on long content pages. This is something we can't really emulate in javascript as mobile devices are not really powerful.
The Webkit team could give us a proprietary CSS property that would overwrite the viewport behavior, and this is the proposition here. Give us a CSS property like position: -webkit-viewport-fixed that we can apply on a div so it can be fixed to the viewport.
Help us now and tweet this! Digg me Delicious Dzone Reddit Stumble Upon