[wp-trac] [WordPress Trac] #46749: Extra border is displaying at bottom of Help section in Firefox (Responsive : 778 * 841)

[WordPress Trac]

#46749: Extra border is displaying at bottom of Help section in Firefox (Responsive
: 778 * 841)
---------------------------------+-----------------------------
 Reporter:  jitendrabanjara1991  |       Owner:  (none)
     Type:  defect (bug)         |      Status:  new
 Priority:  normal               |   Milestone:  Future Release
Component:  Administration       |     Version:  4.3
 Severity:  normal               |  Resolution:
 Keywords:  needs-patch          |     Focuses:  ui
---------------------------------+-----------------------------
Changes (by afercia):

 * keywords:  needs-design => needs-patch
 * version:  5.1 => 4.3
 * component:  General => Administration
 * milestone:  Awaiting Review => Future Release


Comment:

 @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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/46749#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform