javascript - Element.focus() + IE 10+ 中的 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 值，但它现在可以工作。