在过渡运行时聚焦输入，拧紧过渡元件中元件上的位置

Question

所以我有以下代码按预期工作，聚焦输入然后转换播放：

http://codepen.io/anon/pen/coydu

但是，如果我在转换过程中像这里一样聚焦输入（使用setTimeout在转换过程中使焦点发生）：

http://codepen.io/anon/pen/ywmct

有时你必须打开/关闭它几次，甚至在输入中输入文字。

元素内部元素上具有过渡播放的位置被搞砸了。此代码示例至少制动了Chrome和FireFox。如果我将超时设置为0，它仍会在FireFox中制动，但它在Chrome中没有被破坏。

现在有了这个例子，我显然可以不使用setTimeout来修复问题，但是我遇到了一个使用MV *框架的更大的应用程序，并且没有办法强制将输入的聚焦发生在之前或之后转换（除了在JavaScript中进行转换，我真的真的不想做）。

所以我有两个问题：

1. 为什么会这样？
2. 无论如何要解决这个问题，以便过渡期间输入的聚焦不会搞砸元素在过渡元素中的位置吗？

更新

以下是发生问题的视频。我点击按钮的前3次出现超时问题。最后3次我点击按钮，没有超时，问题就不会发生。

http://vimeo.com/83786195

有些原因在Mac上这个问题似乎更加一致。它发生在我和我的一个同事非常一致的Mac上。另一个在Windows上的同事必须打开元素，在输入中键入内容，然后关闭元素，然后再次重新打开元素，这使得问题更加一致。

Answer 1

你不能在.inner上使用position: fixed;吗？

查看我的演示http://jsfiddle.net/YC7a7

我确实将setTimeout更改为500，因此更容易看到更改。