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




Layout: Block and Inline
5 years ago
2 years ago


(Reporter: Matt Stuehler, Unassigned)


17 Branch

Firefox Tracking Flags

(Not tracked)


(Whiteboard: closeme WFM 2013-06-01)



5 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

5 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 http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-central/firefox-21.0a1.en-US.win32.zip
Component: Untriaged → General
Whiteboard: closeme WFM 2013-02-01


5 years ago
Component: General → Untriaged

Comment 2

5 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.


5 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

5 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 http://jsfiddle.net/DZjPr/ does not work with Firefox 19.0.2 on Mac OS X 10.8.2.

See also http://stackoverflow.com/questions/13163613/select-tag-doesnt-work-properly-when-container-has-css3-transform-in-firefox.

Comment 5

4 years ago
Also, please take a look at this: https://github.com/jquery/jquery-mobile/issues/5753

And if you want to see the bug in the wild, go to https://onse2012.smartsteuer.de 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.