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

NEW
Unassigned

Status

()

Core
Layout: Form Controls
a year ago
a month ago

People

(Reporter: karlcow, Unassigned)

Tracking

55 Branch
Points:
---
Bug Flags:
webcompat ?

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [webcompat])

Attachments

(2 attachments)

(Reporter)

Description

a year ago
Created attachment 8865282 [details]
select and text alignment

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.
(Reporter)

Comment 1

a year ago
I'm not sure it's in Mats area for widget and moz-appearance.
Flags: webcompat?
Flags: needinfo?(mats)
Whiteboard: [webcompat]
(Reporter)

Comment 2

a year ago
This is happening both on Desktop and Android.
Created attachment 8865707 [details]
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)
(Reporter)

Comment 4

a year ago
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
(Reporter)

Updated

a year ago
(Reporter)

Updated

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