Closed Bug 454625 Opened 16 years ago Closed 6 years ago

Firefox internal stylesheets override <select> line-height with an !important declaration even when appearance is set to "none"

Categories

(Core :: Layout: Form Controls, defect)

Product:
Core
Component:
Layout: Form Controls
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED FIXED
Milestone:
mozilla64

People

(Reporter: jeff.boulet, Assigned: MatsPalmgren_bugz)

References

Details

(Whiteboard: [webcompat])

Attachments

(1 file)

test case
1.17 KB, text/html
Details
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_4; en-us) AppleWebKit/525.18 (KHTML, like Gecko) Version/3.1.2 Safari/525.20.1 Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.0.1) Gecko/2008070206 Firefox/3.0.1 Firefox internal stylesheets override <select> line-height with an !important declaration. I see it when Firebug is enabled and when it is disabled. Reproducible: Always Steps to Reproduce: 1. 2. 3. Firefox also aggressively caches everything even when I have cache set to 0. I must hard refresh.
True. This isn't a bug.
Status: UNCONFIRMED → RESOLVED
Closed: 15 years ago
Component: General → Layout: Form Controls
OS: Mac OS X → All
Product: Firefox → Core
QA Contact: general → layout.form-controls
Hardware: PowerPC → All
Resolution: --- → INVALID
There are reports in bug 349259 that other browsers support 'line-height' on <select>, so reopening, although I'd like to see further data.
Status: RESOLVED → REOPENED
Ever confirmed: true
Resolution: INVALID → ---
(Note that bug 610733 covers the behavior of 'height' on <select>, which is different from 'line-height'.)
Status: REOPENED → NEW
Flags: needinfo?(x.redir)
(Apparently the claims that other browsers honor 'line-height' are false, although testcases demonstrating otherwise would be welcome.)
(In reply to David Baron [:dbaron] (needinfo? me) (UTC-7) from comment #4) > (Apparently the claims that other browsers honor 'line-height' are false, > although testcases demonstrating otherwise would be welcome.) Not completely correct. Safari and Chrome running on OS X 10.9 and Mobile Safari on IOS 7 do respect the specified line-height in one specific case: when -webkit-appearance: none is specified. I'll attach a test case next. Not sure what Chrome on other platforms does.
Attached file test case —
the cyan box (4th from left) respects the specified line-height.
Ah, so if you stop trying to make it look like a <select> at all, ok. I would expect that WebKit/Blink do that consistently across platforms; it almost certainly falls directly out of how they implement -webkit-appearance by falling back to a non-custom box type.
Comment on attachment 8396163 [details] test case ><!doctype html> ><html lang="en"> ><head> ><meta charset="utf-8"> ><title>test: something</title> ><meta name="viewport" content="width=device-width"> <!-- , minimal-ui --> ><style type="text/css"> > >html { > /*background: rgb(250,250,250)*//* url(../_img/grid2a.png) 10px 10px*/; > color: rgb(10,10,10); > font: 400 100%/1.42 'Helvetica Neue', 'Arial', sans-serif; > > /*text-rendering: optimizeLegibility;*/ > >} >body { margin: 0 20px; } > >select { width: 13em; border: 1px solid; background-color: yellow; } > >.a { line-height: 3em; } > >.b { font-size: .85rem; font-family: 'Helvetica Neue', Arial, sans-serif; line-height: 3em; } >.c { background-color: cyan; -webkit-appearance: none;-moz-appearance: none;} > ></style> > ></head> > ><body> ><p><select><option selected="selected" value="north">north</option><option value="south">south</option></select> ><select class="a"><option selected="selected" value="north">north</option><option value="south">south</option></select> ><select class="b"><option selected="selected" value="north">north</option><option value="south">south</option></select> ><select class=" b c"><option selected="selected" value="north">north</option><option value="south">south</option></select> > ></body> ></html>
Comment on attachment 8396163 [details] test case ><!doctype html> ><html lang="en"> ><head> ><meta charset="utf-8"> ><title>test: something</title> ><meta name="viewport" content="width=device-width"> <!-- , minimal-ui --> ><style type="text/css"> > >html { > /*background: rgb(250,250,250)*//* url(../_img/grid2a.png) 10px 10px*/; > color: rgb(10,10,10); > font: 400 100%/1.42 'Helvetica Neue', 'Arial', sans-serif; > > /*text-rendering: optimizeLegibility;*/ > >} >body { margin: 0 20px; } > >select { width: 13em; border: 1px solid; background-color: yellow; } > >.a { line-height: 3em; } > >.b { font-size: .85rem; font-family: 'Helvetica Neue', Arial, sans-serif; line-height: 3em; } >.c { background-color: cyan; -webkit-appearance: none; -moz-appearance: none;} > ></style> > ></head> > ><body> ><p><select><option selected="selected" value="north">north</option><option value="south">south</option></select> ><select class="a"><option selected="selected" value="north">north</option><option value="south">south</option></select> ><select class="b"><option selected="selected" value="north">north</option><option value="south">south</option></select> ><select class=" b c"><option selected="selected" value="north">north</option><option value="south">south</option></select> > ></body> ></html>
Could <select> to respect the line-height specified at least when it has '-moz-appearance: none'?
Please fix this, you will have lots of love from me. This is painful to maintain a vertical rhythm using padding & no control on the line-height :/
Agree with Maxime. I can't layout my field elements in a line without the select being an odd height to the others due to line-height inconsistencies. Other browsers seem to get it right
I also agree, this should be addressed. When `-moz-appearance` is set to `none`, it should respect the `line-height` set by the developer.
Summary: Firefox internal stylesheets override <select> line-height with an !important declaration. → Firefox internal stylesheets override <select> line-height with an !important declaration even when appearance is set to "none"
Flags: webcompat?
See Also: → https://webcompat.com/issues/6062
Depends on: 1368555
Flags: webcompat?
Whiteboard: [webcompat]
This is defined in https://dxr.mozilla.org/mozilla-central/rev/6ff60a083701d08c52702daf50f28e8f46ae3a1c/layout/style/res/forms.css#241 ```css select { margin: 0; border-color: ThreeDLightShadow; background-color: -moz-Combobox; color: -moz-ComboboxText; font: -moz-list; /* * Note that the "UA !important" tests in * layout/style/test/test_animations.html depend on this rule, because * they need some UA !important rule to test. If this changes, use a * different one there. */ line-height: normal !important; white-space: nowrap !important; word-wrap: normal !important; text-align: start; cursor: default; box-sizing: border-box; -moz-user-select: none; -moz-appearance: menulist; border-width: 2px; border-style: inset; text-indent: 0; overflow: -moz-hidden-unscrollable; text-shadow: none; /* No text-decoration reaching inside, by default */ display: inline-block; page-break-inside: avoid; overflow-clip-box: padding-box !important; /* bug 992447 */ } ```
comment 16 is incorrect; !important declarations in the UA style sheet override all other declarations.
After 10 years, this seems to be finally patched: https://hg.mozilla.org/mozilla-central/rev/50a3c9a567e3 Yay! 🎉
Ah indeed through Bug 1499578 mats, should we close this? And I checked the webcompat issues linked above, they have been fixed by https://hg.mozilla.org/mozilla-central/rev/50a3c9a567e3 Thanks Stefan for posting it. Thanks mats for the hard work.
Flags: needinfo?(mats)
The 'line-height' issue should be fixed in v64 hopefully (bug 1499578 + bug 1501908). (we also support -webkit-appearance:none now)
Assignee: nobody → mats
Status: NEW → RESOLVED
Closed: 15 years ago → 6 years ago
Depends on: 1499578
Flags: needinfo?(x.redir)
Flags: needinfo?(mats)
Resolution: --- → FIXED
Target Milestone: --- → mozilla64
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: