css issue FF30 input height

[alexufo]

Can you test it in FF30 all input fields (text, password...) and "select" fields now has different size.
1) enter in any hierarchical taxonomy editing form. ( example wp-admin/edit-tags.php?taxonomy=category )

2) you will see "select" different size from other inputs.

in FF 29 size of all inputs = 28px.

.wp-admin select {
    height: 28px;
}

Now in FF 30 need add height: 28px to other inputs too .

[azaozz]

Yeah, in FF 30 (just out) the default styles for form elements were updated. We'll need to revisit them. Also line-height: normal; is not enforced any more for buttons, so most buttons vertical alignment is a bit off.

[UmeshSingla]

I could test the patch only on chrome and Firefox, and it seems to work fine.

[UmeshSingla]

Fixes firefox input height and button line height

[alexufo]

What about responsive design? Try to narrow browser and selects will be 36px;

form.css 812

#wpbody select {
font-size: 16px;
height: 36px;
}

[UmeshSingla]

Replying to alexufo:

What about responsive design? Try to narrow browser and selects will be 36px;

form.css 812

#wpbody select {
font-size: 16px;
height: 36px;
}

Yup, the buttons and select are all 36px in responsive design, I've updated the patch. I did some testing using BrowserStack, it worked fine but I'm limited on resources to do a full testing.

[UmeshSingla]

Fixes firefox input height and button line height

[azaozz]

There seem to be quite a few more places where some adjustments are needed. The log in form, some fields in the media modal, most button sizes, etc. Also all changes need to work in responsive mode and have to be tested in all supported browsers, including mobile.

[afercia]

hi,
what Mozilla changed in Firefox 30 (after 8 years they were asked to :-)) is this:
​https://hg.mozilla.org/mozilla-central/rev/58dc82ba5952
together with some internal changes to apply restrictions to input *fields* (not buttons)

related tickets:
​https://bugzilla.mozilla.org/show_bug.cgi?id=349259
​https://bugzilla.mozilla.org/show_bug.cgi?id=697451

so now line-height affects all main inputs however single-line text inputs elements cannot have a line-height smaller than 1, while inputs type=button have no restrictions.
The other browsers also have a minimum value for inputs line-height, for example webkit min value is "normal". See comment here:
​http://trac.webkit.org/browser/trunk/Source/WebCore/rendering/RenderTextControlSingleLine.cpp#L381
"Do not allow line-height to be smaller than our default" (which is "normal").

For years we had to deal with Firefox default declaration line-height: normal !important and every line-height value in our stylesheets didn't apply to Firefox. So all our rules on input fields were crafted to match Firefox behavior.

The difference we can see now between Firefox and Webkit, for example on the login form, is that Firefox allows for a minimum value of "1" which in this case is 24px while Webkit allows for a minimum value of "normal" which is *roughly* 1.2. But ​line-height: normal is abnormal and actually depends on browsers roundings and the fonts' built-in metrics and Open Sans has a quite tall x-height so the computed value in Webkit is 33px.

Ironically, the quickest fix would be to re-introduce what Mozilla removed and just add

input {
  line-height: normal !important;
}

because we can assume all the other line-height declarations for input fields that set a specific value, are there to match Firefox previous behavior that was, that's the point: normal!

On the other hand, that would be a missed opportunity to have better CSS but the only thing that needs to be adjusted is the line-height on inputs, no need to adjust "height" or other properties.

[azaozz]

Replying to afercia:

Thanks for the detailed explanation :)

For years we had to deal with Firefox default declaration line-height: normal !important and every line-height value in our stylesheets didn't apply to Firefox. So all our rules on input fields were crafted to match Firefox behavior.
...
Ironically, the quickest fix would be to re-introduce what Mozilla removed and just add

input {
  line-height: normal !important;
}

because we can assume all the other line-height declarations for input fields that set a specific value, are there to match Firefox previous behavior that was, that's the point: normal!

On the other hand, that would be a missed opportunity to have better CSS but the only thing that needs to be adjusted is the line-height on inputs, no need to adjust "height" or other properties.

Yes, by the time WordPress 4.0 is released (couple of months), the great majority of Firefox users will be on 30+ so thinking it would be best to take advantage of this change and improve our CSS.

One thing to be aware of is text input fields with larger font size that also have more padding. Sometimes the top and bottom of the text can be cut off.

[nacin]

Is there something we should do in a 3.9.2?

[azaozz]

This is (mostly) not backwards-compatible. Making it look better in FF 30+ will make it look not-as-good in FF 29 or older. For 3.9.2 we probably can add (only for FF):

input {
  line-height: normal !important;
}

[afercia]

Replying to azaozz:

Thanks for the detailed explanation :)

I know: too long, guilty :)

[ocean90]

#28665 was marked as a duplicate.

[helen]

#28802 was marked as a duplicate.

[SergeyBiryukov]

#29042 was marked as a duplicate.

[azaozz]

In: [29366]

Fix CSS for form elements for Firefox 30+, fixes #28500.

[azaozz]

Reopen for 3.9.2.

[helen]

3.9.2 shipped without this.