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

【问题标题】：CSS translate breaks <input> autocomplete list positionCSS 翻译中断 <input> 自动完成列表位置
【发布时间】：2014-07-28 00:31:51
【问题描述】：

我在使用 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。

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

【问题讨论】：

它实际上在 BugZilla (bugzilla.mozilla.org/show_bug.cgi?id=467442) 中有一个错误。但我需要一个解决方法。
不，但这没有效果。

标签： html css firefox

【解决方案1】：

为什么要使用 translate 来定位 div，不能用 top 和 left 进行调整，除非你使用动画和关键帧 translate 并没有提供那么大的好处。

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

【讨论】：

这是一个模态对话框，必须在窗口中完全居中。而且我事先不知道它的大小，而且我不喜欢用 JavaScript 定位它。
@MightyPork：你为什么不能使用这样的东西？ jsfiddle.net/T8M7g/30
@Misled 显然，因为我不知道对话框会有多大。它会根据表格包含的内容而变大（还有其他对话框，而不仅仅是屏幕截图上的那个）。
@MightyPork：这是否意味着它的宽度和高度将是auto 或者它们会有实际的单位值？您可以在我的演示中更改尺寸，它会保持居中。
@Misled 是的，自动（如果这是默认设置）。小提琴并不完全准确，更像是：jsfiddle.net/MightyPork/T8M7g/31

【解决方案2】：

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

Comment of Catalin Varga on Bugzilla

【讨论】：

看看firefox 33什么时候发布。我现在 31 岁。