Chrome 39 Bug - Input select() breaks scrolling

Question

I have an HTML grid where we use arrow keys to navigate the cells (like a spreadsheet made of divs). Each cell has an INPUT textbox. We use javascript to catch keyboard arrow keys to move around the grid. This has worked fine in all browsers for over a year. Now, with Chrome 39, the grid will no longer scroll properly so that the input with focus is visible on screen.

Here is a fiddle to demonstrate the problem: scrolling list.

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

Use the up and down arrows to scroll through cells in the list. When it hits top or bottom, it should scroll into view if the new cell is not already in view.

This fiddle example still works fine in IE10+ and Firefox, but in Chrome 39 (latest version), it will not scroll when you arrow into a new cell off the bottom or top. Also, it looks like the textboxes redraw off by a few pixels sometimes.

When a new cell (input) gets focus, we call this.select() to select any existing text. If we remove the call to select(), then Chrome 39 works fine again. But, users would like to see text selected.

The question is: Is there something I am doing that would cause this, or is it a bug in Chrome 39? If it is a bug, does anyone know a workaround to select input text without breaking the native scrolling into view behavior? Any ideas would be appreciated.

Update:

It appears that even removing ALL JS code, leaving just a bunch of inputs in a scrolling div also fails (only on Chrome). You can only navigate with tab/shift-tab without JS, but scroll problem still occurs. Am I going crazy, or do other people see the same screwy scrolling when running this fiddle?

See Updated Fiddle for example.

Answer 1

The problem seems to occur, in my experience, from a parent container with position absolute/fixed with z-index value. This affects Chrome 39+

Try setting that parent container to have the following CSS declaration:

-webkit-backface-visibility: hidden;