Mobile Browsers and position: fixed;

I’ve often said that mobile development reminds me a lot of The First Browsers War, except that now there are seemingly thousands of IE6s out there…

position:fixed is just one of the “issues” we all deal with every day that are supported by some devices, not by others, and partially-but-poorly by others.

Here is a nice work-around for position:fixed:
http://habrahabr.ru/post/162841/
While this article is in Russian, Chrome does a fair job of translating it, but you can also get the gist from just the code.

Finding the Scroll Position in IE10

I hate to label this a “device bug”, but since everyone else supports it, and someone doesn’t, I’ll label it as such…

It’s been so long since I had to deal with IE that I had forgotten about this, but IE does not support window.scrollX/window.scrollY; you have to use window.pageXOffset/window.pageYOffset

So this is an effective way to find the current vertical scroll position:
var top = (window.scrollY || window.pageYOffset);

One more teeny difference for the mobile web! :-)

One Shim to Rule Them All!

Although it is dependent on Modernizr and jQuery, Webshims Lib is incredible!
http://css-tricks.com/how-to-use-the-webshims-polyfill/

Use this to shim anything that isn’t supported:
$.webshims.polyfill();
Or something like this to only support certain features:
$.webshims.polyfill('forms canvas');

Awesome…

Note: The demo in the article link above did not initially work for me in IE<9, but that was because, not being my normal browser, my IE did not have Flash installed… :-) Worked quite nicely once I had the right stuff installed! Perhaps some form of "plug-in not found" message would be nice, instead of, you know, nothing…