Closed Bug 1298510 Opened 8 years ago Closed 2 years ago

setting background-color on a select element hides the dropdown arrow until next reflow

Categories

(Core :: Layout: Form Controls, defect, P4)

Product:
Core
Component:
Layout: Form Controls
Version:
48 Branch
Type:
defect

Tracking

()

Status:
RESOLVED WORKSFORME

People

(Reporter: sk8mini, Unassigned)

Details

(Keywords: testcase)

Attachments

(2 files, 1 obsolete file)

Screenshot of missing drop down icon on mac
13.71 KB, image/png
Details
Testcase
223 bytes, text/html
Details 
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Steps to reproduce:

View the following HTML on firefox 48 on a mac ( https://jsfiddle.net/njf4v5rk/1/ ).

<html>

<body>
<select id="select">
<option>foo</option>
</select>

<script>
document.getElementById("select").style="background-color: red";
</script>

</body>
</html>

The problem exists on the nightly build (as of 8/26/16)


Actual results:

The select element is rendered correctly as red, but the dropdown arrow is missing



Expected results:

The dropdown arrow should be visible
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout: Form Controls
Ever confirmed: true
Product: Firefox → Core
OS: Unspecified → Mac OS X
Hardware: Unspecified → x86_64
same probleme on windows 7 and more + firefox 48 and more.

i'd like to know if this problem will be corrected soon or if i have to install google chrome instead.

i absolutelly need to see background colors on select box for my web site.

best regards.
Safari on OSX does not display the background color either, nor does Edge on Windows 10.

The bug might actually be the opposite, namely that 'background-color' disables
the native theme in Firefox on Windows and Linux when it shouldn't.
Severity: normal → minor
Status: NEW → UNCONFIRMED
Ever confirmed: false
Priority: -- → P5
Attached file Reporter's testcase (obsolete) — 
Keywords: testcase

    
    

    
  
it is really considered as MINOR ????

moreover, the problem is encontered on Windows AND Mac.

a HUGE shame !!!

https://jsfiddle.net/d3fdv0kp/

    
    

    
  
It seems the reason Safari/Edge doesn't honor the background color for this testcase
is that they don't support the syntax you used (only Chrome and Firefox appears to
support that).  If you use either of these instead then the background is red also
in Edge/Safari:
document.getElementById("select").setAttribute("style", "background-color: blue");
document.getElementById("select").style.backgroundColor = "red";

Anyway, the dropdown arrow is visible in *all* browsers I've tested,
including Firefox.  On OSX I tested: FF 52.0.2, FF 53.0b10, and FF 54.0a2.
(which is the current Release, Beta and Dev Edition builds, respectively)

Would you mind testing again with a recent version of Firefox please?
It might have been a bug that we've now fixed.
Flags: needinfo?(duce81)

    
    

    
  
sorry, i was wrongly redirected to this thread.
my problem is not on the arrow but that firefox refuses to apply background-color to option tag on a select menu.

https://bugzilla.mozilla.org/show_bug.cgi?id=558612
Flags: needinfo?(duce81)

    
    

    
  
Yeah, that's a different issue from the one reported here.

AFAICT, the testcase in this bug is working as expected.
Status: UNCONFIRMED → RESOLVED
Closed: 8 years ago
Resolution: --- → WORKSFORME

    
    

    
  


  

    
    

    
  
(In reply to sk8mini from comment #8)
> Created attachment 8857079 [details]
> Screenshot of missing drop down icon on mac

It's still not working correctly on Firefox 52.0.2 (64-bit).  I clicked on the jsfiddle link above and saw the issue instantly.

    
    

    
  
Hmm, I can reproduce it on JSFiddle, however if I double-click on the control it renders
the dropdown button.  So I guess there is some difference in how that page loads compared
to the "Reporter's testcase" attached to this bug report.
Status: RESOLVED → REOPENED
Ever confirmed: true
Resolution: WORKSFORME → ---

    
    

    
  

      
      
      
      

        Attached file
          
        Testcase
        — 
      

    


  
Here's a better test.  It appears that if we first render the combobox
with native styling, and then later change the background-color then
the dropdown button disappears until the next reflow.
(zooming in/out makes the dropdown button render again)

        Attachment #8854076 -
        Attachment is obsolete: true
OS: Mac OS X → All
Priority: P5 → P4
Hardware: x86_64 → All
Summary: setting background-color on a select element hides the dropdown arrow on mac → setting background-color on a select element hides the dropdown arrow until next reflow

    
    

    
  
Here's a workaround which forces a reflow:


selectElement.style.width = '0';
setTimeout(function() {selectElement.style.width = 'auto';}, 0);



Still reproducible in August 2020 on OS X.



    
    

    
  
No longer reproducible in August 2022 on OS X.



    
    

    
  
Yeah, probably fixed by the non-native theme.


Status: REOPENED → RESOLVED
Closed: 8 years ago → 2 years ago
Resolution: --- → WORKSFORME

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






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: