javascript - タブストップキル変換によるフォーカス変更

Question

少し問題があり、どういうわけか解決策が見つかりません。別の div 内に div があり、この div を css3 変換で移動しています。この div 内には、入力などのさまざまな量のコントロールがあります。

このような：

<div id='container'>
    <div id='content'>
        <input id='input1' type='text'/>
        <input id='input2' type='text'/>
    </div>
</div>

ユーザーがこれらのコントロールを切り替えると、タブストップによって翻訳が完全に台無しになります。そして、divが現在どこにあるかのヒントはありません。ここに小さなデモがあります:

JSFiddleデモ

最初の入力とタブをクリックすると、目的地は 2 番目の入力になります (右下、現時点では表示されません)。ブラウザはそれを表示しようとして、翻訳を強制終了します。すべての値は同じままですが、ビューは同期していません。shift-tab を使用してタブを戻すと、ビューが壊れていることが明確になります。翻訳は常に -100、-100 のままです。

ブラウザが入力を自動表示しないようにしたい。ボックスにフォーカスすることはできますが、ビューをボックスまでスクロールしてはなりません。何か案は？