WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 4 years ago

#28500 closed defect (bug) (fixed)

css issue FF30 input height

Reported by: alexufo Owned by:
Milestone: 4.0 Priority: normal
Severity: normal Version: 4.0
Component: Administration Keywords:
Focuses: ui, administration Cc:

Description (last modified by nofearinc)

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 .

Attachments (2)

28500.diff (662 bytes) - added by UmeshSingla 6 years ago.
Fixes firefox input height and button line height
28500.2.diff (803 bytes) - added by UmeshSingla 6 years ago.
Fixes firefox input height and button line height

Download all attachments as: .zip

Change History (21)

#1 @azaozz
6 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.0

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.

#2 @UmeshSingla
6 years ago

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

@UmeshSingla
6 years ago

Fixes firefox input height and button line height

#3 follow-up: @alexufo
6 years ago

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

form.css 812

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

#4 in reply to: ↑ 3 @UmeshSingla
6 years ago

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
6 years ago

Fixes firefox input height and button line height

#5 @nofearinc
6 years ago

  • Description modified (diff)

#6 @azaozz
6 years ago

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.

#7 follow-up: @afercia
6 years ago

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.

#8 in reply to: ↑ 7 ; follow-up: @azaozz
6 years ago

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.

#9 @nacin
6 years ago

  • Milestone changed from 4.0 to 3.9.2

Is there something we should do in a 3.9.2?

#10 @azaozz
6 years ago

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;
}

#11 in reply to: ↑ 8 @afercia
6 years ago

Replying to azaozz:

Thanks for the detailed explanation :)

I know: too long, guilty :)

#12 @ocean90
6 years ago

#28665 was marked as a duplicate.

#13 @helen
6 years ago

#28802 was marked as a duplicate.

#14 @SergeyBiryukov
6 years ago

#29042 was marked as a duplicate.

#15 @azaozz
6 years ago

  • Milestone changed from 3.9.2 to 4.0
  • Resolution set to fixed
  • Status changed from new to closed

In: [29366]

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

#16 @azaozz
6 years ago

  • Milestone changed from 4.0 to 3.9.2
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopen for 3.9.2.

#17 @azaozz
6 years ago

  • Keywords fixed-major added; needs-patch removed

#18 @helen
6 years ago

  • Keywords fixed-major removed
  • Milestone changed from 3.9.2 to 4.0
  • Resolution set to fixed
  • Status changed from reopened to closed

3.9.2 shipped without this.

This ticket was mentioned in Slack in #core by afercia. View the logs.


4 years ago

Note: See TracTickets for help on using tickets.