Chrome error 39 - selecting input () scrolling breaks

I have an HTML grid where we use arrow keys to move through cells (like tables from a div). Each cell has an INPUT text box. We are using javascript to catch the keyboard arrow keys to navigate the grid. This has worked fine in all browsers for over a year. Now, as of Chrome 39, the grid will no longer scroll correctly so that the focused input is visible on the screen.

Here's a fiddle to demonstrate the problem: a scroll 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 the cells in the list. When it hits the top or bottom, it should scroll into view if the new cell isn't already visible.

This example script still works fine in IE10 + and Firefox, but in Chrome 39 (latest version) it won't scroll when you arrow to a new cell from the bottom or top. Also, it looks like text boxes sometimes redraw a few pixels.

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

Question: is there something I am doing that might be causing this, or is this a bug in Chrome 39? If this is a bug, does anyone know a workaround for selecting input text without breaking the natural scrolling into view behavior? Any ideas would be appreciated.

Update:

It looks like even removing the ALL JS code, leaving only a bunch of inputs in the scrollable div, also fails (Chrome only). You can only navigate with tab / slide-tab without JS, but the scrolling issue still happens. Am I going crazy, or are other people seeing the same piercing scrolling when they run this violin?

See the updated script for example.