581604 - Select requires two clicks to open when applying -moz-transform scale to focus

Status: UNCONFIRMED

(Core :: Layout: Form Controls, defect)

Description

[Josh Brackett]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8 (.NET CLR 3.5.30729)

I would like to scale input boxes including select boxes when the user focuses the input box.  Select boxes change behavior when I add a transform to the focus though.

<style type="text/css">
    select:focus {
      -moz-transform: scale(1.05);
      -webkit-transform: scale(1.05);
    }
</style>

Reproducible: Always

Steps to Reproduce:
1. Apply style
2. Click on select box
3. Click again to view options
Actual Results:  
Have to click the select box twice.  First one focuses it, second time opens it.

Expected Results:  
1. Apply style
2. Click on select box and see options

Comment 1

[Josh Brackett]

Attachment: Shows bug

Comment 2

[Tyler Downer [He/Him]]

This bug was reported using a pre-release version of Firefox 4. Now that Firefox 4.0.1 final has been released, can you please update and retest your bug? A fresh profile would be a good starting place to test, 
http://support.mozilla.com/kb/Managing+profiles. If you continue to see the issue, can you please update this bug with your results?

Filter: firefox4prebugsunco

Comment 3

[Josh Brackett]

(In reply to comment #2)
> This bug was reported using a pre-release version of Firefox 4. Now that
> Firefox 4.0.1 final has been released, can you please update and retest your
> bug? A fresh profile would be a good starting place to test, 
> http://support.mozilla.com/kb/Managing+profiles. If you continue to see the
> issue, can you please update this bug with your results?
> 
> Filter: firefox4prebugsunco

The issue remains with Firefox 4.0.1.  No update to the test case is needed.

Comment 4

[Boris Zbarsky [:bzbarsky]]

This is the usual issue where reframing the <select> messes with click handling.  In particular, what's happening here is that you click, the <select> opens the dropdown, then the whole <select> rendering object is destroyed and recreated because of the transform setting....

You can work around this by using |select { -moz-transform: scale(1); }| in your stylesheet, so the scale change won't need to reframe.

Comment 5

[Josh Brackett]

(In reply to comment #4)
> This is the usual issue where reframing the <select> messes with click
> handling.  In particular, what's happening here is that you click, the
> <select> opens the dropdown, then the whole <select> rendering object is
> destroyed and recreated because of the transform setting....
> 
> You can work around this by using |select { -moz-transform: scale(1); }| in
> your stylesheet, so the scale change won't need to reframe.

Thank you for the comment and work around Boris.