The mobile webkit fixed position problem

by Cedric Dugas on February 22, 2010

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.



13 comments

The mobile webkit CSS fixed position problem…

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 devices are no powerhouse to emulate it with javascript….

by CSS Brigit | The mobile webkit CSS fixed position problem on February 25, 2010 at 9:19 am. Reply #

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

by Markive on March 9, 2010 at 10:07 am. Reply #

Cool name! :D

by marksyzm on March 29, 2011 at 5:25 am. Reply #

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?

by Roel on March 26, 2010 at 5:43 am. Reply #

Hi Markive,

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

Thanks

by Victor Ruiz on May 3, 2010 at 2:42 pm. Reply #

Hi Markive,

I’m also very interseted in this solution.

by liangyuan on August 9, 2010 at 12:48 am. Reply #

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

by mtness on September 4, 2010 at 11:38 am. Reply #

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!

by Daniel J. Pinter on November 27, 2010 at 11:36 am. Reply #

[...] we aren’t using absolute positioning on our <div> tags (see this article for reasoning) and won’t make use of the browser’s scroll bar, we had to go the old [...]

by Example of “Project Update” | HiDef Web Solutions on February 4, 2011 at 5:59 pm. Reply #

[...] is also another way to possibly fixed this problem. By using something called iScroll I didn’t get to try it but it seemed like something that be pretty nice effect for mobile [...]

by NIS HIM ORI » ‘el mobile detection on April 9, 2011 at 12:24 am. Reply #

Thank you for sharing this information. The information was very helpful and saved a lot of my time.

by hollister uk on July 19, 2011 at 1:15 am. Reply #

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

by TheDirector227 on August 4, 2011 at 12:30 pm. Reply #

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.

by Simon on October 6, 2011 at 9:53 am. Reply #

Leave your comment

Required.

Required. Not published.

If you have one.