如何在选择文本时阻止浏览器滚动？潜在的浏览器bug？

Question

我正在使用我正在处理的应用程序遇到一个奇怪的问题...每当用户突出显示已在页面上向下翻译的div上的文本时,浏览器将立即开始向上滚动.这很难描述,所以我做了一个展示问题的示例页面......

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

我还将文本上传到pastebin以便于查看(如果我以后再删除该URL):

http://pastebin.com/ay6LUcfP

如果你 - 通过JavaScript - translate()将div1和div2都恢复到默认位置,问题就不会在div1中出现.它只发生在div2内部并且只在它位于用户面前时(例如它已被"translate()"转换).

老实说,我认为这可能是一个浏览器错误,但我不确定,因为我不是ECMAScript或DOM专家.有任何想法吗？

编辑:我已经更新了HTML以适用于Firefox 4+和Opera 11+(分别是-moz-transform和-o-transform).我还为更新的脚本创建了一个新的pastebin链接(链接已更新).这个问题似乎没有出现在这两种浏览器中,因此它似乎肯定是Chrome错误.

编辑2:我已在Chromium网站上针对此问题打开了错误报告:http: //code.google.com/p/chromium/issues/detail？id = 74318

它可能是Webkit中的一个错误,但我会让Chromium的人知道是否是这种情况.

Answer 1

FWIW，问题似乎是浏览器的代码负责检测您何时选择 pre 的边界（即何时应滚动以跟随该选择）在翻译后没有获取更新的位置。当您开始选择时，它会看到您正在选择，并且您的光标距离它认为的预选位置向上半个屏幕，因此它向上滚动得非常快。相反，要使其向下滚动，您需要在选择时转到容器的底部，即 pre 的底部在 translate() 之前的位置。

也就是说，我显然不知道如何解决它，但我几乎肯定这是一个浏览器错误。