在过渡运行时聚焦输入在过渡元素中的元素上固定位置答案

【问题标题】：Focusing input while transition is running screws up position on element in transitioning element在过渡运行时聚焦输入在过渡元素中的元素上固定位置
【发布时间】：2014-01-10 02:47:15
【问题描述】：

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

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

但是，如果我像这里这样在转换期间聚焦输入（使用 setTimeout 使聚焦在转换期间发生）：

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

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

播放过渡的元素内部的元素位置被搞砸了。此代码示例至少在 Chrome 和 FireFox 中都存在问题。如果我将超时设置为 0，它仍然会在 FireFox 中刹车，但在 Chrome 中不会损坏。

现在有了这个例子，我显然可以不使用 setTimeout 来解决问题，但是我正在使用 MV* 框架来体验这个更大的应用程序，并且没有办法强制输入的焦点发生在之前或之后过渡（除了在 JavaScript 中进行过渡，我真的真的不想这样做）。

所以我有两个问题：

为什么会这样？
是否有办法解决这个问题，以便在转换期间输入的焦点不会搞砸转换元素内的元素定位？

更新

这是发生问题的视频。我单击按钮的前 3 次问题发生在超时。最后 3 次单击按钮时，如果没有超时，问题不会发生。

http://vimeo.com/83786195

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

【问题讨论】：

我所缺少的我在两个 codepen 示例中都看到了相同的内容。炒锅很好
@Danko 我假设您使用的是 Windows。尝试打开它，在输入中输入一些内容，然后关闭它，然后再次打开它，这应该会显示我在使用第二个 codepen 时遇到的问题。出于某种原因，在我的 Mac 上，我无需在输入中输入任何内容即可发生此问题。
你解决过这个问题吗？
我参加聚会很晚了，但是如果有人像我一样遇到这个问题，请尝试在过渡结束之前不要调用焦点（在修改之前绑定的 transitionEnd 事件侦听器中） css）。我相信焦点会打断过渡。

标签： html css css-transitions

【解决方案1】：

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

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

我确实将 setTimeout 更改为 500，以便更容易看到更改。

【讨论】：

那行不通。在您的示例中，即使外部的宽度为 0，表单也会显示。我的内部主要用于 min-width 元素，它可以防止在外部元素扩展时内容四处移动，如果我没有，它看起来像这样：codepen.io/anon/pen/fkCFu（想象一下外部的内容更复杂）。
好吧，只在 Safari 中测试过它，它在那里工作。在 Firefox 中进行了测试，然后它以任何一种方式显示了表单，但是如果我从 jsfiddle 演示中删除了 position:fixed，并在 Chrome、Safari、Firefox 中对其进行了测试，它显示没有任何问题。所以不知道你的 codepen 演示是怎么回事。
用视频更新我的问题以显示正在发生的问题。
感谢视频更新。我在测试您的演示时看到了同样的问题，但如果我在 jsfiddle 中使用完全相同的代码，我不会遇到问题（在 Mac 上测试：“Chrome”、“Safari”、“Firefox”）。所以我的猜测是 Codepen 现在有问题，而且我还没有使用太多，所以不能肯定地说。你有没有在你的域上测试过你的代码？在 jsfiddle 中，我使用查询 1.7.2 及更高版本进行了测试。 jsfiddle.net/qmht9
当我尝试在本地托管代码时，它不会经常发生，但确实会发生。此外，当托管在本地时，如果我打开它，输入一些内容，然后关闭并重新打开它，它会更频繁地发生。