Closed Bug 1571764 Opened 3 months ago Closed 3 months ago

When line-height is applied to select, the element ends up being slightly (~2px?) taller than expected

Categories

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

68 Branch
Unspecified
All
defect

Tracking

()

RESOLVED FIXED
mozilla70
Tracking Status
firefox68 --- wontfix
firefox69 --- wontfix
firefox70 --- fixed

People

(Reporter: fabiovenni, Assigned: emilio)

References

Details

Attachments

(3 files)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:68.0) Gecko/20100101 Firefox/68.0

Steps to reproduce:

I want to compose the height of a select element by summing padding to a set line-height, it looks like the line-height is ignored. (There used to be a similar bug affecting only buttons years ago.)

Actual results:

line-height is ignored, final height is not the expected one

Expected results:

Here is an example, it should behave like the second element (GO!).
Same CSS applied to a different element gives the expected result.
https://codepen.io/fabiovenni/pen/LwQpPe?editors=1100

Hi,
I reproduced this issue with css attached on Mac 10.14 with Firefox Release 68, Firefox Beta 69 and Nightly 70.
On Safari and Chrome works as expected.

Status: UNCONFIRMED → NEW
Component: Untriaged → Layout: Text and Fonts
Ever confirmed: true
OS: Unspecified → macOS
Product: Firefox → Core

Hmm, this seems to work fine here both in release and Nightly? Can you attach an screenshot?

Raluca, what exactly could you reproduce? I'm confused :)

This was an issue in the past, but was fixed in bug 1499578.

Component: Layout: Text and Fonts → Layout: Form Controls
Flags: needinfo?(rpopovici)
Flags: needinfo?(fabiovenni)

Hi, retested in FF 68.0.1 and Nightly, bug is still there, I don't seem to be able to attach a screenshot, but if you inspect the codepen you can easily see the button to be 29px tall while the select is 31px, expected behavior is that they have the same height.

Flags: needinfo?(fabiovenni)

(In reply to fabiovenni from comment #3)

Hi, retested in FF 68.0.1 and Nightly, bug is still there, I don't seem to be able to attach a screenshot, but if you inspect the codepen you can easily see the button to be 29px tall while the select is 31px, expected behavior is that they have the same height.

Ok, I can see a slightly different height, thanks. But line-height is not ignored, right? As in, increasing the line-height does increase the height of the <select> and so on. Just trying to reduce the test-case better to show the bug and try to come up with a better title. The bug title was "select line-height ignored" which looks false :)

Flags: needinfo?(fabiovenni)

Was tunnel visioned in the example and I didn't think of changing the value. Yes the title should be "When applied to selects line-height has always 2 pixel added to the expect value (also when is rem, ems or %)"

Summary: Select line-height ignored → When line-height is applied to select, the element ends up being slightly (~2px?) taller than expected
Attached file Reduced test-case.

Ok, so this should be a better test-case that shows the bug.

Attachment #9085398 - Attachment mime type: text/plain → text/html

ah!

Flags: needinfo?(fabiovenni)

Daniel was looking at this in bug 1560824, but I think it's not as simple as just removing that padding.

FWIW, it's not quite true that other browsers necessarily end up with the exact same height for a <select> and a <button>; e.g. with the codepen from comment 0 in Safari on macOS 10.13, the <select> is slightly taller than the <button>. (It's easier to see the discrepancy if you have them side-by-side on the same line.)

See Also: → 1560824

on both Chrome and Safari they have the same height, on Safari they are not perfectly aligned, selects have rounded corners etc, but same height

Assignee: nobody → emilio
Priority: -- → P3

This fixes it and seems to be an acceptable fix... Should I make it conditional
on box-sizing: border-box for completeness? The display frame has border-box
box-sizing, and not having it would be a bug, I'd think...

Oh, I wrote the patch before reading comment 9 and such.

Flags: needinfo?(rpopovici)
OS: macOS → All

I'm afraid this also gives a bad result for a native-themed <select>, at least on macOS; see screenshot.

D'oh :(

(In reply to Emilio Cobos Álvarez (:emilio) from comment #14)

D'oh :(

I think I addressed that, though I'm not quite sure it's the right fix here... I'll take a look at what buttons do.

Attachment #9085404 - Attachment description: Bug 1571764 - Subtract combobox display frame border-padding when inferring the height from line-height. r=mats → Bug 1571764 - Subtract combobox display frame border-padding when inferring the height from line-height.
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/bd44d2dd0c02
Subtract combobox display frame border-padding when inferring the height from line-height. r=mats,jfkthame
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/18426 for changes under testing/web-platform/tests
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.
Upstream PR was closed without merging
Backout by aiakab@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/725ed6685414
Backed out changeset bd44d2dd0c02 for causing web platform test failures on select-1-block-size-001.html CLOSED TREE
Attachment #9085404 - Attachment description: Bug 1571764 - Subtract combobox display frame border-padding when inferring the height from line-height. → Bug 1571764 - Subtract combobox display frame border-padding when inferring the height from line-height. r=mats
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/ad04c84153da
Subtract combobox display frame border-padding when inferring the height from line-height. r=mats,jfkthame
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.
Pushed by emilio@crisal.io:
https://hg.mozilla.org/integration/autoland/rev/2b01af1b413a
followup: WR is a bit more fuzzy on windows.
Pushed by emilio@crisal.io:
https://hg.mozilla.org/integration/autoland/rev/bd8ef39cfadc
follow-up: Fix tests on Android, where some form controls apparently have border-radius.
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.
Flags: needinfo?(emilio)
You need to log in before you can comment on or make changes to this bug.