IE 10+中的Element.focus（）+ CSS動畫定位問題

Question

在IE 11中遇到了一個奇怪的行為，想看看是否有人看過。 我在height: 0px;的容器內有一個輸入元素height: 0px; 和overflow: hidden; 。 另一個元素通過CSS轉換觸發容器上的活動類以使其具有一定高度。 相同的觸發器在輸入上調用focus() 。

在IE 10和11中，似乎在CSS動畫期間調用focus（）會使輸入元素凍結在動畫中該階段的位置。

這是一個小提琴

請注意，在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);
      }
    };
  }); 

此處的更多信息： 經過轉換的CSS轉換后，IE11中光標的位置錯誤