Chrome 39 错误 - 输入 select() 中断滚动答案

【问题标题】：Chrome 39 Bug - Input select() breaks scrollingChrome 39 错误 - 输入 select() 中断滚动
【发布时间】：2014-12-13 07:24:21
【问题描述】：

我有一个 HTML 网格，我们使用箭头键来导航单元格（就像一个由 div 组成的电子表格）。每个单元格都有一个 INPUT 文本框。我们使用 javascript 来捕捉键盘箭头键以在网格中移动。一年多来，这在所有浏览器中都运行良好。现在，在 Chrome 39 中，网格将不再正确滚动，因此具有焦点的输入在屏幕上可见。

这是一个演示问题的小提琴：scrolling list。

// This causes scrolling into view on focus to stop working
$('#grid').on('focus','input',function(e){
    this.select();
});

使用向上和向下箭头滚动列表中的单元格。当它到达顶部或底部时，如果新单元格尚未在视图中，它应该滚动到视图中。

这个小提琴示例在 IE10+ 和 Firefox 中仍然可以正常工作，但在 Chrome 39（最新版本）中，当您将箭头移至底部或顶部的新单元格时，它不会滚动。此外，看起来文本框有时会重新绘制几个像素。

当一个新的单元格（输入）获得焦点时，我们调用 this.select() 来选择任何现有的文本。如果我们删除对 select() 的调用，那么 Chrome 39 将再次正常工作。但是，用户希望看到被选中的文本。

问题是：我正在做什么会导致这种情况，还是 Chrome 39 中的错误？如果这是一个错误，是否有人知道在不破坏本机滚动到视图行为的情况下选择输入文本的解决方法？任何想法将不胜感激。

更新：

似乎即使删除所有 JS 代码，只在滚动 div 中留下一堆输入也会失败（仅在 Chrome 上）。没有 JS 只能使用 tab/shift-tab 导航，但滚动问题仍然存在。我是不是疯了，或者其他人在运行这个小提琴时会看到同样的螺旋滚动？

例如，参见Updated Fiddle。

【问题讨论】：

真的很奇怪。我试图对其进行一些修改，从上到下它工作正常，但仍然从下到上导致问题。我猜想多次将焦点集中在同一个组件上是有原因的。请在此处检查更新的代码jsfiddle.net/3hgu50b5/6 我将尝试检查是否可以确定根本原因。

标签： javascript jquery google-chrome

【解决方案1】：

根据我的经验，这个问题似乎来自一个父容器，它的位置是绝对/固定的，z-index 值。这会影响 Chrome 39+

尝试将该父容器设置为具有以下 CSS 声明：

-webkit-backface-visibility: hidden;

【讨论】：

【解决方案2】：

嗯，它看起来只是 Chrome 39 中的一个错误。希望他们很快就会修复它。

幸运的是，Chrome 也是少数支持 scrollIntoViewIfNeeded() 方法的浏览器之一，因此作为一种解决方法，我能够在焦点事件处理程序中执行以下操作：

this.select();
if (typeof this.scrollIntoViewIfNeeded === "function")
    this.scrollIntoViewIfNeeded(true);

所以，这解决了眼前的问题。

【讨论】：