jsfiddle here

This is a bug specific to IE and I'm looking for a work around.

When I apply a CSS transform: translate to a text input, that has the focus, with transition set to something valid, the cursor stays in the old location while the element moves.

Once you start typing it moves to the correct location, but before that the cursor stubbornly blinks at the old location.

This code illustrates the problem... again, it's an IE specific bug.

var toggleTop = function(){
    $('.input-container').toggleClass('top');
    $('#the-input').focus();
}

$('#the-button').click(toggleTop);

.input-container {
    top: 100px;
    left: 100px;
    position: fixed;
    transition: all 1s;
}

.input-container.top {
    transform: translateY(-100px);
}

<script src=".1.1/jquery.min.js"></script>
<div class='input-container'>
    <input type='text' id='the-input'></input>
</div>
<button id='the-button'>Click Me!</button>

jsfiddle here

This is a bug specific to IE and I'm looking for a work around.

When I apply a CSS transform: translate to a text input, that has the focus, with transition set to something valid, the cursor stays in the old location while the element moves.

Once you start typing it moves to the correct location, but before that the cursor stubbornly blinks at the old location.

This code illustrates the problem... again, it's an IE specific bug.

var toggleTop = function(){
    $('.input-container').toggleClass('top');
    $('#the-input').focus();
}

$('#the-button').click(toggleTop);

.input-container {
    top: 100px;
    left: 100px;
    position: fixed;
    transition: all 1s;
}

.input-container.top {
    transform: translateY(-100px);
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='input-container'>
    <input type='text' id='the-input'></input>
</div>
<button id='the-button'>Click Me!</button>

• javascript
• css
• transform
• internet-explorer-11
• translate-animation

Share Improve this question Follow asked Oct 28, 2014 at 20:25 wmilwmil 3,18922 gold badges2323 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

One year passed, and I've encountered this issue as well. Here is angular.js directive that I used to fixed it, based on the accepted answer's code and explanation.

angular.module('my.directive')
  .directive('custom-auto-focus', function ($timeout) {
    return {
      link: function (scope, elm) {
        $timeout(function() {
          elm[0].focus();
        }, 350);
      }
    };
  }); 

Is there any reason why you can't wait for the transition to end before focusing on the element? Considering you're using CSS transitions you should have access to transitionend event.
This fixes the issue:

var toggleTop = function () {
    var inputContainer = $('.input-container'),
        input = inputContainer.find('#the-input');

    inputContainer.toggleClass('top');

    inputContainer.one('transitionend', function () {
        input.focus();
    });
};


$('#the-button').click(toggleTop);

Updated JSFiddle