CSS翻译中断<input />自动完成列表位置

Question

我有 Firefox 这个奇怪的问题。在Chrome中运行正常。

基本上，div中的<input>具有这种风格：

.modal {
    overflow:auto;
    position: fixed;

    top: 50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
}

在完全错误的位置显示自动完成功能，如您所见：

这里是fiddle。

欢迎任何解决方案。 （禁用自动完成功能并不是我想要的）。

Answer 1

为什么你想使用translate来定位div，你不能用top和left调整除非你使用动画和关键帧翻译不能提供很大的好处。

页面上元素占用的空间与转换前相同，因此您的自动完成菜单会在翻译前的位置打开。

Answer 2

Firefox中的自动完成错误似乎在FF33中得到修复：

Comment of Catalin Varga on Bugzilla