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…
http://webreflection.blogspot.co.uk/2013/04/few-modern-javascript-inconsistencies.html
Category Archives: Device Bug
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.
http://www.456bereastreet.com/archive/201301/the_mysterious_webkit_placeholder_overflow_bug/
* Note that this bug exists in all WebKit browsers, mobile and desktop…
Windows Phone 8 Viewport Fix
<meta name="viewport" ... >
apparently doesn’t work properly in IE10, so here is a hack to fix the problem:
http://trentwalton.com/2013/01/16/windows-phone-8-viewport-fix/
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…
Weird behaviour with optgroups in iOS6 Safari
Yet another “challenge”, brought to you by iOS6…
http://www.thecssninja.com/html/optgroup-ios6