Internet Explorerでモーダル内のautofocus使用時にカーソル位置がずれる問題の解決方法

問題の概要

Bootstrapのモーダルウィンドウ内でautofocus属性を使用した場合、Internet Explorerではテキスト入力フィールドのカーソルが奇妙な位置に表示されることがあります。これは、モーダル表示時のスライドダウン（下から滑り込む）アニメーション中にフォーカスが設定されることで発生する、IE特有のレンダリングの問題です。

解決方法1：CSSでトランジションを上書きする

モーダルのアニメーションをフェードのみに変更することで、この問題を回避できます。以下のCSSを追加してください。

.modal.fade {    transition: opacity .3s linear;}

これにより、モーダルは上下へのスライド移動を行わなくなり、透明度の変化だけでスムーズにフェードインするようになります。結果として、アニメーション中にカーソル位置がずれる現象を防げます。

解決方法2：windowClassで強制的にフェードインさせる

JavaScript側でモーダルを開く際に、windowClassオプションを指定する方法もあります。UI Bootstrapなどのライブラリでモーダルを制御している場合は、次のように設定します。

windowClass: 'modal fade in'

inクラスを付与することで、モーダルが最初から表示完了の状態として扱われ、スライドアニメーション自体がスキップされます。そのため、フォーカスされた要素のカーソルは常に正しい位置に表示されます。

まとめ

Internet Explorerでは、モーダルのスライドアニメーションの途中でautofocusによるフォーカスが適用されると、カーソルが意図しない位置に配置されてしまうことがあります。上記のいずれかの方法でアニメーションをフェードのみに制限することで、この問題を簡単に解決できます。モダンブラウザでは発生しにくい挙動ですが、IEのサポートが必要なレガシープロジェクトでは覚えておくと役立つ対処法です。