IE 10+中的Element.focus（）+ css动画定位问题

Question

在IE 11中遇到了一个奇怪的行为，想看看是否有其他人看过这个。我在容器内有一个输入元素height: 0px;和overflow: hidden;。另一个元素触发容器上的活动类，使其具有一定的高度，并具有CSS转换。同一触发器在输入上调用focus()。

在IE 10和11中，似乎在CSS动画期间调用focus（）会导致输入元素冻结在动画中该阶段的位置。

Here is a fiddle

注意，在IE 10+中，输入光标偏离垂直中心。如果从CSS中删除转换，它将居中。

其他人看过这个或有更好的解决方案吗？

Answer 1

目前，我的解决方案是将focus()调用封装在与CSS动画持续时间匹配的setTimeout中，以确保在字段到达转换结束之前不会发生焦点。不理想，因为它独立地混合了CSS和JS值，但它现在可以使用。

Answer 2

已知IE问题 - 光标在输入转换之前保持在相同位置。解决方案是@steve编写的 - 只在转换结束后才设置焦点。

您可以使用此角度解决方案：

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

更多信息： Cursor in wrong position in IE11 after CSS transform w/ transition