How to stop browser from scrolling when text is selected? Potential browser bug?

Question

I'm experiencing a strange issue with an app I'm working on... Whenever the user highlights text on a div that's been translated down the page a bit, the browser will instantly start scrolling up. It is really hard to describe so I've made an example page that exhibits the issue...

http://riskable.com/files/scroll_problem.html

I've also uploaded the text to pastebin for easy viewing (and if I ever take that URL down later):

http://pastebin.com/ay6LUcfP

If you--by means of JavaScript--translate() both div1 and div2 back to their default positions the problem does not exhibit itself inside div1. It only occurs inside div2 and only when it is in front of the user (e.g. it has been transformed by a "translate()").

I honestly think this might be a browser bug but I'm not certain since I'm not an ECMAScript or DOM expert. Any ideas?

EDIT: I have updated the HTML to work in both Firefox 4+ and Opera 11+ (-moz-transform and -o-transform, respectively). I have also created a new pastebin link for the updated script (the link has been updated). The problem doesn't appear to exhibit itself in either of those browsers so it appears to definitely be a Chrome bug.

EDIT 2: I have opened a bug report for this issue on the Chromium site: http://code.google.com/p/chromium/issues/detail?id=74318

It is probably a bug in Webkit but I'll let the Chromium folks find out if that is the case.

Answer 1

FWIW, Ithe problem seems to be the browser's code responsible for detecting when you are selecting over the pre's bounds (i.e., when it should scroll to go with that selection) isn't getting the updated position after translate. When you start selecting, it sees you are selecting, and your cursor is half a screen up from where it believes the pre to be, so it scrolls up really fast. Conversely, to make it scroll down you need to go to the bottom of the container while selecting, where your pre's bottom was before translate().

That said, I obviously have no idea how to solve it, but I'm almost positive it's a browser bug.