Modern JavaScript Inconsistencies

It’s always fun to (quickly) scroll through lists of old, nostalgic JS oddities. But here’s a list of a few current JS oddities; coder beware…


The Mysterious WebKit Placeholder Overflow Bug

[A] frustrating overflow bug that took me ages to find the cause of. Sometimes a horizontal scrollbar would appear for no obvious reason.
* Note that this bug exists in all WebKit browsers, mobile and desktop…

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

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


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…