Cursor at wrong position in IE11 after CSS transform with transition
This is an IE specific bug and I am looking for a job.
When I apply CSS transform: translate
to text input that has focus and is transition
set to something valid, the cursor stays in the old location while the element is moved.
As soon as you start typing text, it moves to the right place, but before that, the cursor stubbornly blinks in the same place.
This code illustrates the problem ... again, this is 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.com/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>
source to share
Is there a reason you can't wait for the transition to complete before focusing on the element? Given that you are using CSS transitions, you must have access to the event transitionend
.
This fixes the problem:
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);
source to share
A year passed and I ran into this problem. Here is the angular.js directive I used to fix it based on the accepted answer code and explanation.
angular.module('my.directive')
.directive('custom-auto-focus', function ($timeout) {
return {
link: function (scope, elm) {
$timeout(function() {
elm[0].focus();
}, 350);
}
};
});
source to share