![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
#46749 closed defect (bug) (fixed)
Extra border is displaying at bottom of Help section in Firefox (Responsive : 778 * 841)
| Reported by: | jitendrabanjara1991 | Owned by: | afercia |
|---|---|---|---|
| Priority: | normal | Milestone: | 5.2.2 |
| Component: | Administration | Version: | 4.3 |
| Severity: | normal | Keywords: | has-patch |
| Cc: | Focuses: | ui |
Description
In responsive, extra border is displaying at bottom of Help section in Firefox. (Responsive : 778 * 841) where it's working fine in chrome section.
Attachments (4)
Change History (24)
#1
@
7 years ago
- Component General → Administration
- Keywords needs-patch added; needs-design removed
- Milestone Awaiting Review → Future Release
- Version 5.1 → 4.3
@jitendrabanjara1991 thanks. Interesting case. Worth noting it happens also with Chrome, it's just less visible.
Seems to me this was introduced in [32844] where the line-height was changed from a value in pixels line-height: 22px; to a unitless value: line-height: 1.7;.
On desktop, the computed value is 13 x 1.7 = 22px.
However, in the mobile view the font size increases to 14 pixels so the computed value becomes 23.8px.
Browsers have different rounding algorithms. They also render fonts in a slightly different way. This could explain why it's more evident with Firefox.
According to the WordPress coding standards "Line height should also be unit-less, unless necessary to be defined as a specific pixel value" but this is not always desirable. This is one of the cases where an unit-less value produces a bug :)
I'd lean towards moving some of the styles from the wrappers to the buttons, to that the buttons can increase their height keeping a correct styling.
#2
@
7 years ago
- Keywords has-patch added; needs-patch removed
46749.diff is a start. Some testing would be nice.
#3
@
7 years ago
Good to note that this also affects the Screen Options tab.
@afercia I did a quick test of your patch in Chrome, Firefox and IE11 on a Windows machine. It seems to fix the issue, but I will do some more extensive testing to make sure.
#4
@
7 years ago
@ianbelanger thanks. I'm uncertain if keeping the box-shadow. It seems unnecessary to me but I tried to keep the original intent of the buttons style (even though the box-shadow is not that visible).a
#5
@
7 years ago
Hello @afercia and @ianbelanger
Thanks for the response.
I didn't get this point.
Version changed from 5.1 to 4.3.
Thanks.
#6
@
7 years ago
@jitendrabanjara1991 it appears the bug was introduced in version 4.3. See https://make.wordpress.org/core/handbook/contribute/trac/
Version: The version of WordPress being used. Ideally, this would be the earliest affected or applicable version.
#7
@
7 years ago
Hello @afercia
Thanks for the response.
Ok. That means, this issue is again open in version 5.1.
Thanks.
#8
@
7 years ago
- Keywords needs-design-feedback added
I tend to agree with you on removing the box-shadow @afercia, but since I am not a designer, I am going to tag this with needs-design-feedback and maybe we can get a designer to weigh in on it.
#9
@
7 years ago
- Milestone Future Release → 5.3
- Owner set to
- Status new → assigned
Seems a quick, nice, fix. Moving to 5.3 consideration pending design feedback.
This ticket was mentioned in Slack in #core by marybaum. View the logs.
7 years ago
#11
@
7 years ago
- Keywords commit added
I gave @afercia the design feedback that we should probably remove a redundant border, so we're ready to commit.
#15
@
7 years ago
- Keywords fixed-major added; commit removed
- Resolution fixed
- Status closed → reopened
Reopening for 5.2.2 consideration.
#17
@
7 years ago
Last commit amends [45501] to restore the focus style previously missed. See new screenshot above.
Extra border is displaying at bottom of help section