WordPress.org

Make WordPress Core

Opened 8 months ago

Closed 5 months ago

Last modified 5 months ago

#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:
PR Number:

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)

46749.extra-border-is-displaying-at-bottom-of-help-section.png (53.0 KB) - added by jitendrabanjara1991 8 months ago.
Extra border is displaying at bottom of help section
46749.diff (885 bytes) - added by afercia 7 months ago.
before after Firefox.png (88.5 KB) - added by afercia 5 months ago.
Before and after screenshot (Firefox)
focus style.png (13.3 KB) - added by afercia 5 months ago.

Download all attachments as: .zip

Change History (24)

@jitendrabanjara1991
8 months ago

Extra border is displaying at bottom of help section

#1 @afercia
7 months 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.

@afercia
7 months ago

#2 @afercia
7 months ago

  • Keywords has-patch added; needs-patch removed

46749.diff is a start. Some testing would be nice.

#3 @ianbelanger
7 months 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 @afercia
7 months 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 @jitendrabanjara1991
7 months 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 @afercia
7 months 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 @jitendrabanjara1991
7 months ago

Hello @afercia

Thanks for the response.

Ok. That means, this issue is again open in version 5.1.

Thanks.

#8 @ianbelanger
7 months 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 @afercia
6 months 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.


5 months ago

#11 @marybaum
5 months ago

  • Keywords commit added

I gave @afercia the design feedback that we should probably remove a redundant border, so we're ready to commit.

#12 @marybaum
5 months ago

  • Milestone changed from 5.3 to 5.2.2

#13 @marybaum
5 months ago

  • Keywords needs-design-feedback removed

@afercia
5 months ago

Before and after screenshot (Firefox)

#14 @afercia
5 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 45501:

Administration: Remove extra border from the Screen Options and Help buttons.

The extra border was visible in the responsive view for smaller screens after [32844].

Props jitendrabanjara1991.
Fixes #46749.

#15 @afercia
5 months ago

  • Keywords fixed-major added; commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for 5.2.2 consideration.

#16 @afercia
5 months ago

In 45502:

Administration: Improve the Screen Options and Help buttons focus style after [45501].

Amends [45501].
See #46749.

@afercia
5 months ago

#17 @afercia
5 months ago

Last commit amends [45501] to restore the focus style previously missed. See new screenshot above.

#18 @audrasjb
5 months ago

Hi @afercia do you think we can have a backport for this ticket today so we can ship that on 5.2.2 RC1?
Thank you! The RC processing is going to start at 19:00 UTC.

#19 @afercia
5 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 45513:

Administration: Remove extra border from the Screen Options and Help buttons.

The extra border was visible in the responsive view for smaller screens after [32844].

Props jitendrabanjara1991.

Merges [45501] and [45502] to the 5.2 branch.
Fixes #46749 for 5.2.2.

#20 @afercia
5 months ago

  • Keywords fixed-major removed
Note: See TracTickets for help on using tickets.