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

Status: RESOLVED WORKSFORME

(Core :: Layout: Block and Inline, defect)

Description

[Matt Stuehler]

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

In Firefox, this 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/


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

[Phoenix]

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

Comment 2

[edelman.jason]

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.

Comment 3

[Raymond]

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

[TJ]

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

[D.Hansmann]

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.

Comment 6

[Ed Morley [:emorley]]

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

[Phoenix]

Reporter, do you still see this problem in current Firefox?

Comment 8

[Matt Stuehler]

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

Nice work, Firefox team!