Open Bug 1362907 Opened 7 years ago Updated 10 months ago

option text in select element with min-height is top aligned instead of centered

Categories

(Core :: Layout: Form Controls, defect)

55 Branch
defect

Tracking

()

Webcompat Priority P3

People

(Reporter: karlcow, Unassigned)

References

Details

(Whiteboard: [webcompat])

Attachments

(3 files)

See the screenshot 
* Gecko Firefox left 
* WebKit Safari center
* Blink Opera right

This is a spin off the webcompat issue 
https://webcompat.com/issues/6475

I created a minimal test case on 
https://codepen.io/webcompat/pen/oWoQpG

select {
appearance: none;
-webkit-appearance: none;}
.min-height {min-height:50px;}

<select class="min-height">
  <option value="-1">Sélectionner</option>
  <option value="8" selected="">46</option>
 </select>


Expected: The text is vertically centered.
Actual: the text is align to the top.

This is happening only with min-height, when height is specified the alignment is vertically centered.
I'm not sure it's in Mats area for widget and moz-appearance.
Flags: webcompat?
Flags: needinfo?(mats)
Whiteboard: [webcompat]
This is happening both on Desktop and Android.
Attached file Testcase
I don't think this is related to 'appearance:none', the same issue also
occurs with native themeing.  I don't think this has ever worked correctly.

The first version that we vertically center the text in the 'height' case
is Firefox 31, before that we aligned both cases at the top.  We've never
centered the text for the 'min-height' case, AFAICT.
Flags: needinfo?(mats)
Not sure this is a similar case but we have a different alignment than WebKit and Blink. A combination of padding and height.
https://webcompat.com/issues/6669

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Webcompat Priority: --- → ?

See bug 1547409. Migrating whiteboard priority tags to program flags.

Webcompat Priority: ? → P3
Flags: webcompat?

This is also hitting select boxes at https://m.gsmarena.com, as per bug 1587082 (closed as dupe).

Severity: normal → S3
Attached file testcase 2

Just ran into this with Itiel when looking at a select in some Firefox frontend code, which happened to be deriving its height from min-height and had its contents misaligned as a result of this bug.

Here's a reduced testcase that I came up with while investigating.

ACTUAL RESULTS:
The first "Select" text is top-aligned within the select dropdown-button.

EXPECTED RESULTS:
That text should be vertically centered within its button, like all the other text.

Attachment #8865282 - Attachment description: select and text alignment → screenshot: select and text alignment
Attachment #9308877 - Attachment description: testcase 3 → testcase 2
You need to log in before you can comment on or make changes to this bug.