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

Question

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

这是一个演示问题的 fiddle :scrolling list .

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

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

这个 fiddle 示例在 IE10+ 和 Firefox 中仍然可以正常工作，但在 Chrome 39(最新版本)中，当您从底部或顶部箭头进入新单元格时，它不会滚动。此外，看起来文本框有时会重绘几个像素。

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

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

更新:

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

参见 Updated Fiddle例如。

Answer 1

根据我的经验，问题似乎发生在父容器的位置绝对/固定为 z-index 值。这会影响 Chrome 39+

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

-webkit-backface-visibility: hidden;