Question

There seems to be a bug in Firefox (which has been marked as resolved but fails on my FF12) that causes <select> elements to work incorrectly when their position has been altered with -moz-transform. This can be replicated with this simple test case:

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

This causes the select box to be rendered in the correct position, but all of the options are unselectable with the mouse. Selecting them using the keyboard works fine.

Is there any other workaround for this problem than removing all the transformations? The problem does not exist for any other browser.

Answer 1

I’ve had problems like this before with elements that have been transformed, and I solved it with some JavaScript and extra CSS.

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

You need to bind mozTransitionEnd, webkitTransitionEnd, etc.