Element.focus() + css animation positioning issue in IE 10+

Question

Came across a strange behavior in IE 11 and wanted to see if anyone else has seen this. I have an input element inside a container with height: 0px; and overflow: hidden; . Another element triggers an active class on the container to give it some height, with a CSS transition. The same trigger calls focus() on the input.

In IE 10 and 11, it seems as though calling focus() during a CSS animation causes the input element to freeze in it's position at that stage in the animation.

Here is a fiddle

Notice, in IE 10+, the input cursor is off vertical center. If you remove the transition from the CSS, it will be centered.

Anyone else seen this or have a better solution?

Answer 1

For now, my solution is to wrap the focus() call in a setTimeout matching the CSS animation duration, to ensure the focus won't happen until the field reaches the end of the transition. Not ideal, since it mixes CSS and JS values independently, but it works for now.

Answer 2

It is known IE issue - the cursor stay in the same position before the input transition. The solution is as @steve wrote - put a focus only after the transition is ended.

You can use this angular solution:

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

More information here: Cursor in wrong position in IE11 after CSS transform w/ transition