Safari/Webkit scrollTo bug?
Browsers affected: Safari, Webkit (not chrome!) When holding a directional key, window.scrollTo will animate to the new position rather than instantly re-positioning, even if directional keys are forcibly overridden.
by MrNibbles
HTML
<!doctype html>
<body>
<div class="overFlowingContent">
CONTENT THAT IS OVERFLOWING
</div>
</body>
CSS
body {
overflow: hidden;
}
.overFlowingContent {
width: 120000px;
height: 12000px;
background: url('http://capturingthecity.files.wordpress.com/2007/11/9938c2.jpg');
}
JavaScript
// =====================
// = Bug Description: =
// =====================
// Browsers affected:
// Safari Version 5.0.3 (6533.19.4), Webkit Version 5.0.3 (6533.19.4, r77034) on Mac OS X only
// When holding a directional key, window.scrollTo() or window.scroll() will animate to the new position rather than instantly re-position
// even if directional keys are forcibly overridden.
// This happens in no other browsers
// :INSTRUCTIONS:
// -- To replicate, hold either the left or right arrow key --
var preventScroll = function(e) {
// prevent the keypresses from scrolling the window
e.stopPropagation();
e.preventDefault();
// for firefox
return false;
};
// Bind preventScroll to key actions
document.onkeypress = preventScroll;
document.onkeydown = preventScroll;
document.onkeyup = preventScroll;
// Set a random scroll position
function scrollBlock() {
window.scroll(~~ (Math.random() * 2000), (~~(Math.random() * 2000)));
}
// Move to a random position every second
window.setInterval(scrollBlock, 1000);