CSS transforms makes <select> elements dropdown list to be misplaced/offset




6 years ago
2 years ago


(Reporter: Andrée Hansson, Unassigned)


Windows 7

Firefox Tracking Flags

(Not tracked)





6 years ago
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.58 Safari/535.2

Steps to reproduce:

Use CSS transforms to modify the layout/position of elements

Happens on all Firefox 4+ versions I've tried, even today's nightly (10a1).

Test case: http://jsfiddle.net/robreact/7YQ7E/2/
Related bug, but only for transforming scale (the bug itself seems to be in CSS transforms, not which property you use, e.g. 'scale' or 'translate' etc.): https://bugzilla.mozilla.org/show_bug.cgi?id=628387

Actual results:

<select> dropdown lists are not placed under the element (it has the wrong offset/position)

Expected results:

It should have aligned to the <select> element container

Comment 1

6 years ago
Sorry, the test case is http://jsfiddle.net/GwGWu/ - the one linked above is however related and attached to the related bug mentioned.
confirming with Seamonkey trunk.
The testcase works in IE9 and Opera11.5
Component: General → Layout
Ever confirmed: true
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → Trunk
And also works with Firefox 9.  Update our Gecko on Seamonkey trunk?
Last Resolved: 6 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 599938

Comment 4

6 years ago
Sorry for my ignorance, I totally missed there was a bug reported already. However, how can it work on your FF9 but not on FF10a1?

Also, what are the possibilities of having this merged down to 7?

Thanks for help!

The testcase linked from comment 1 works for me in a current m-c nightly (so 10a1).

Does it not for you?  If so, please reopen the bug, and let's start trying to figure out why you're seeing a problem and I'm not....

> Also, what are the possibilities of having this merged down to 7?

The only things getting "merged down" to 7 are critical security fixes of the "this vulnerability is being actively exploited in the wild" variety.

Then again, 9 is shipping in 2.5 months.

Comment 6

6 years ago
No, I actually wrote the testcase in the 10a1 version I installed earlier today (around 1pm GMT+2), running on Win7 x64, I will try this again when I'm at work tomorrow and let you know.

Thanks for the answers, really appreciate it.
sorry, that confirming was a mistake.
I got confused by the changing dropdown position

The position of the select elements is ok for me using  Mozilla/5.0 (Windows NT 6.1; rv:10.0a1) Gecko/20111004 Firefox/10.0a1 SeaMonkey/2.7a1
Andrée, when you double-check this, could you also check whether the behavior is the same with hardware acceleration disabled?

Comment 9

6 years ago
I can confirm that it works in x86 and x64 FF Nightly 10a1 today, however, I tried it with yesterday's build (apparently, I tried the x86 version then) and it didn't work, perhaps a faulty installation or build, I don't know. Glad to see that it is indeed fixed. :)

Thank you again for your time.

Comment 10

2 years ago
has this been actually fixed because i can still see the problem on this fiddle http://jsfiddle.net/robreact/7YQ7E/2/ and on my site where i am implementing this anyone with a workround or solution
This is fixed for translation transforms, not general transforms.

Comment 12

2 years ago
The problem with translation transform reappears when I use "-moz-perspective" on the body and "-moz-transform-style: preserve-3d" on a div that contains the select.

Test case: http://jsfiddle.net/7YQ7E/30/
You need to log in before you can comment on or make changes to this bug.