When line-height is applied to select, the element ends up being slightly (~2px?) taller than expected
Categories
(Core :: Layout: Form Controls, defect, P3)
Tracking
()
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
Comment 1•5 years ago
|
||
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.
Assignee | ||
Comment 2•5 years ago
|
||
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.
Reporter | ||
Comment 3•5 years ago
|
||
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.
Assignee | ||
Comment 4•5 years ago
|
||
(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 :)
Reporter | ||
Comment 5•5 years ago
|
||
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 %)"
Assignee | ||
Updated•5 years ago
|
Assignee | ||
Comment 6•5 years ago
|
||
Ok, so this should be a better test-case that shows the bug.
Assignee | ||
Updated•5 years ago
|
Assignee | ||
Comment 7•5 years ago
|
||
Ok, I bet these are our two extra pixels:
Comment 9•5 years ago
|
||
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.)
Reporter | ||
Comment 10•5 years ago
|
||
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 | ||
Updated•5 years ago
|
Assignee | ||
Comment 11•5 years ago
|
||
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...
Assignee | ||
Comment 12•5 years ago
|
||
Oh, I wrote the patch before reading comment 9 and such.
Updated•5 years ago
|
Comment 13•5 years ago
|
||
I'm afraid this also gives a bad result for a native-themed <select>, at least on macOS; see screenshot.
Assignee | ||
Comment 14•5 years ago
|
||
D'oh :(
Assignee | ||
Comment 15•5 years ago
|
||
(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.
Updated•5 years ago
|
Comment 16•5 years ago
|
||
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
Comment 20•5 years ago
|
||
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
Comment 21•5 years ago
|
||
Backed out changeset bd44d2dd0c02 (bug 1571764)for causing web platform test failures on select-1-block-size-001.html CLOSED TREE
Backout revision https://hg.mozilla.org/integration/autoland/rev/725ed668541437310ddcc3fb5aa18e23cfc922b2
Failure log https://treeherder.mozilla.org/logviewer.html#?job_id=261630593&repo=autoland
Emilio can you please take a look?
Updated•5 years ago
|
Comment 22•5 years ago
|
||
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.
Comment 24•5 years ago
|
||
Pushed by emilio@crisal.io: https://hg.mozilla.org/integration/autoland/rev/2b01af1b413a followup: WR is a bit more fuzzy on windows.
Comment 25•5 years ago
|
||
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.
Assignee | ||
Updated•5 years ago
|
Comment 27•5 years ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/ad04c84153da
https://hg.mozilla.org/mozilla-central/rev/2b01af1b413a
https://hg.mozilla.org/mozilla-central/rev/bd8ef39cfadc
Updated•5 years ago
|
Description
•