使用-moz-transform破解<select>的解決方法？

Question

似乎有一個Firefox中的錯誤（它已被marked as resolved，但在我的FF12上失敗），導致<select>元素工作不正確時，他們的位置已更改-moz-transform。這可以用這個簡單的測試情況下被複制：

<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 ed，我用一些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等