使用 <select> -moz-transform 中断的解决方法？

Question

Firefox 中似乎有一个错误（已标记为已解决，但在我的 FF12 上失败），当元素的位置被更改时-moz-transform会导致<select>元素无法正常工作。这可以通过这个简单的测试用例进行复制：

<style type="text/css">
div {
    -moz-transform:translate(380px,140px);
}   
</style>
<div>
    <select>
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
    </select>    
</div>

这会导致选择框呈现在正确的位置，但鼠标无法选择所有选项。使用键盘选择它们工作正常。

除了删除所有转换之外，还有其他解决方法吗？任何其他浏览器都不存在此问题。

Answer 1

我以前遇到过这样的问题，已经transform的元素，我用一些JavaScript和额外的CSS解决了它。

document.addEventListener("transitionend", function(event) {
    var style = event.target.style;
    if (event.propertyName.substr(-14) == "transitionend") {
        style.position = "absolute";
        style.left = "200px";
    }
});

您需要绑定mozTransitionEnd、webkitTransitionEnd等。