If there is one thing you will be missing while developing your mobile web application for Webkit, it is the CSS fixed position. You cannot effectively fix an element on the iPhone, and mobile device are no powerhouse to emulate it with javascript. The problem is simple, yet there is no perfect solution to it.

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..

iScroll

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.

See iScroll in video.

Pastry Kit

You will probably also discover that pastry kit, the Apple Javascript framework for webkit, is doing it quite well. I cannot really comment how Apple is replicating it, they probably use a complex mathematic method to emulate the scrolling. The thing that really sucks with PastryKit is that Apple as not released it officially (not yet anyway), there is no documentation on how to use it, and it seems to be used only internally.

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.

Share this article: Facebook Twitter

13 thoughts on “The mobile webkit fixed position problem”

  1. Pingback: CSS Brigit | The mobile webkit CSS fixed position problem

  2. 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..

  3. 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?

  4. Hi Markive,

    I’m also very interested in this solution. I’ll appreciate a lot if you could upload your solution.

    Thanks

  6. 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

  8. Pingback: Example of “Project Update” | HiDef Web Solutions
  9. Pingback: NIS HIM ORI » ‘el mobile detection

  11. @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!!

  12. 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.