Last Comment Bug 827890 - Drop-down menus (<select> elements) don't register “change” events when the parent div is transformed with transform3d
: Drop-down menus (<select> elements) don't register “change” events when the p...
Status: RESOLVED WORKSFORME
closeme WFM 2013-06-01
:
Product: Core
Classification: Components
Component: Layout: Block and Inline (show other bugs)
: 17 Branch
: All All
: -- normal with 3 votes (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
:
: Jet Villegas (:jet)
Mentors:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2013-01-08 09:26 PST by Matt Stuehler
Modified: 2015-10-07 18:43 PDT (History)
7 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments

Description Matt Stuehler 2013-01-08 09:26:46 PST
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 2013-01-08 14:49:36 PST
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 2013-01-25 17:55:07 PST
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 2013-02-28 03:29:53 PST
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 2013-03-13 08:30:46 PDT
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 2013-03-26 07:42:19 PDT
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] 2013-03-28 03:12:02 PDT
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 2013-05-04 13:11:40 PDT
Reporter, do you still see this problem in current Firefox?
Comment 8 Matt Stuehler 2013-05-14 08:45:53 PDT
This bug appears to be fixed (I'm using 20.0.1)

Nice work, Firefox team!

Note You need to log in before you can comment on or make changes to this bug.