The default bug view has changed. See this FAQ.

Drop-down menus (<select> elements) don't register “change” events when the parent div is transformed with transform3d




Layout: Block and Inline
4 years ago
2 years ago


(Reporter: Matt Stuehler, Unassigned)


17 Branch

Firefox Tracking Flags

(Not tracked)


(Whiteboard: closeme WFM 2013-06-01)



4 years ago
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11

Steps to reproduce:

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>

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!');

In Firefox, this alert is never triggered.

Here's a JSFiddle to demonstrate:

Case 1 (No tranform3d, onchange events fired):

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

Actual results:

When the DIV containing the SELECT element is positioned using translateX, no onchange events are triggered when the user changed the SELECT value

Expected results:

an onchange event should be triggered

Comment 1

4 years ago
Don't see any differences with both testcases in today nightly
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:21.0) Gecko/20130108 Firefox/21.0
Can you check, if you see problem with
Component: Untriaged → General
Whiteboard: closeme WFM 2013-02-01


4 years ago
Component: General → Untriaged

Comment 2

4 years ago
Confirm that this is a problem. In any layout that uses transforms and select boxes the user will be unable to make a selection. Pretty big issue here.


4 years ago
Component: Untriaged → Layout: Block and Inline
OS: Windows 7 → All
Product: Firefox → Core
Hardware: x86_64 → All
Whiteboard: closeme WFM 2013-02-01

Comment 3

4 years ago
Select boxes seem broken on Firefox 19 on OSX period.  Both jsfiddles are broken for me.  I cannot change the values of the select boxes at all.  Firefox 19 OSX 10.7.5

Comment 4

4 years ago
I agree with Raymond. The select in this fiddle does not work with Firefox 19.0.2 on Mac OS X 10.8.2.

See also

Comment 5

4 years ago
Also, please take a look at this:

And if you want to see the bug in the wild, go to and click on "Anonym testen", then on "Grunddaten" in the tree widget on the left.

Bug affects YUI 3.x, too, so please consider this as an upvote.
Ever confirmed: true
Keywords: regressionwindow-wanted
WFM on nightly; cdemon on IRC mentioned this is believed fixed on 20, and given how soon 20 will be released, likely not going to have a 19.0.3 for this.

Sorry this was overlooked for so long - we really need more bug triagers :-(

Comment 7

4 years ago
Reporter, do you still see this problem in current Firefox?
Flags: needinfo?(matt)
Whiteboard: closeme WFM 2013-06-01

Comment 8

4 years ago
This bug appears to be fixed (I'm using 20.0.1)

Nice work, Firefox team!
Last Resolved: 4 years ago
Flags: needinfo?(matt)
Resolution: --- → WORKSFORME
Keywords: regressionwindow-wanted
You need to log in before you can comment on or make changes to this bug.