Question

All,

I’ve run into something that looks like a bug in Firefox.

I have a DIV element that contains a SELECT element:

<div id="wrapper">
    <select id="ddm">
        <option value="a">AAA</option>
        <option value="b">BBB</option>
        <option value="c">CCC</option>
    </select>
</div>

The DIV is then transformed using transform3d (actually, using just translateX, but I get the same results either way).

#wrapper {
    background: yellow;
    height: 100px;
    width: 200px;
    -moz-transform: translateX(200px);
    -webkit-transform: translateX(200px);
    transform: translateX(200px);
}

After the DIV is transformed, changing the SELECT element doesn’t seem to register an onchange event. (Technically, I’m using jQuery and the .change() function, but that doesn’t seem to matter):

$('#ddm').change(function (e) {
    alert ('Select changed!');
});

I.e., the alert is never triggered.

Here’s a JSFiddle to demonstrate:

Case 1 (No tranform3d, onchange events fired):

http://jsfiddle.net/b5fNb/8/

Case 2 (tranform3d, onchange events fired in Chrome and IE, but not Firefox):

http://jsfiddle.net/b5fNb/12/

Am I doing something wrong, or is this a bug?

Thanks in advance!

Answer 1

Unfortunately – this is a bug in Firefox:

https://bugzilla.mozilla.org/show_bug.cgi?id=827890#c2

So – for now – it looks like there won’t be an answer.