#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 |
---|---|---|---|
Milestone: | 5.2.2 | Priority: | normal |
Severity: | normal | Version: | 4.3 |
Component: | Administration | Keywords: | has-patch |
Focuses: | ui | Cc: |
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
@
6 years ago
- Component changed from General to Administration
- Keywords needs-patch added; needs-design removed
- Milestone changed from Awaiting Review to Future Release
- Version changed from 5.1 to 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
@
6 years ago
- Keywords has-patch added; needs-patch removed
46749.diff is a start. Some testing would be nice.
#3
@
6 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
@
6 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
@
6 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
@
6 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
@
6 years ago
Hello @afercia
Thanks for the response.
Ok. That means, this issue is again open in version 5.1.
Thanks.
#8
@
6 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
@
6 years ago
- Milestone changed from Future Release to 5.3
- Owner set to afercia
- Status changed from new to 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.
6 years ago
#11
@
6 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
@
6 years ago
- Keywords fixed-major added; commit removed
- Resolution fixed deleted
- Status changed from closed to reopened
Reopening for 5.2.2 consideration.
#17
@
6 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