On a mobile device you scroll a window, not the site
When you scroll on a mobile device, you are not really scrolling the site, in fact if you zoom out completely you will see the entire page, you are only scrolling your “window” around the site. When you understand this, your fixed footer dream really shatter, unless you are willing to use complex methods..
And there start your quest, on your way you will find iScroll 3.0. This little script create the illusion of a fixed footer, but the performance price is rather high. It emulates scrolling alright, but this is not quite as snappy as the real thing, a big problem if you consider that your users will have a feeling that something is not quite right.
More information on PastryKit.
There is no perfect solution
Personally, I do not see myself implementing these solutions. I, however, stumbled on an interesting solution, make the footer fade out when you scroll, and fade is when you stop. This is not perfect, far from it (it is to wonder why Apple is not implementing something themselves in Webkit..). But I found this was the best solution offered to me.
I am working on a plugin for the jQTouch moible framework, I will probably release it in the weeks to comes.
13 thoughts on “The mobile webkit fixed position problem”
I was doing a proof of concept for the iPhone and did exactly that with about 3 lines of jQuery.. It works quite well.. It’s on my work computer otherwise I’d post it..
Cool name! 😀
I am very interested Markive! Would be nice if you could post the solution here.
How is the performance? Is it as good as a normal fixed postion?
I’m also very interested in this solution. I’ll appreciate a lot if you could upload your solution.
I’m also very interseted in this solution.
Hi there, this seems to me the most elegant solution till now!
The pos:fixed dilemma haunts me since early ie6 days, and when we all thought the battle was over, along came the mobile browsers…
Anyway, would be nice to see ypur solution implemented, or maybe i just have to hit the keys by myself, just out of curiosity!
Kind regards, mtness
For fixed tab bar see the DataZombies/jQTouch fork https://github.com/DataZombies/jQTouch.
Demo is here http://web.me.com/djpinter1/iPhone/jqtouch/demos/main_tabbar.
The tabbar also scrolls horizontally!
Thank you for sharing this information. The information was very helpful and saved a lot of my time.
@DanielJ.Pinter – I like it. Been using the Sencha Touch platform and it has been driving me insane!! Totally forgot about jQuery Mobile. Thanks a bunch!!
How do you implement your fadein/out solution (make the footer fade out when you scroll, and fade is when you stop).
I found out how to detect when the page was scrolled (fadein), but I don’t know how to detect when the page is scrolled (finger down/screen touched).
Please help! Thank you.
Comments are closed.