[wp-trac] [WordPress Trac] #51617: function _admin_bar_bump_cb() conflict on screens <= 600px

Sat Oct 24 00:21:00 UTC 2020

#51617: function _admin_bar_bump_cb() conflict on screens <= 600px
-------------------------------------+-------------------------------------
 Reporter:  zeinnicholas             |      Owner:  (none)
     Type:  defect (bug)             |     Status:  new
 Priority:  normal                   |  Milestone:  Awaiting Review
Component:  Toolbar                  |    Version:  trunk
 Severity:  minor                    |   Keywords:  needs-patch needs-
  Focuses:  ui, css, coding-         |  refresh needs-design needs-design-
  standards                          |  feedback
-------------------------------------+-------------------------------------
 Hello guys,

 there is a conflict between how the CSS is applied to the <html> tag in
 the function **_admin_bar_bumb_cb()** (see
 [https://core.trac.wordpress.org/browser/trunk/src/wp-includes/admin-
 bar.php#L1147 admin-bar.php#L1147]) and the **#wpadminbar** on viewports
 equal or under 600px.

 Since the position of the **#wpadminbar** changes to **absolute** (see:
 [https://core.trac.wordpress.org/browser/trunk/src/wp-includes/css/admin-
 bar.css#L1012 admin-bar.css#L1012]), a gap between the top of the page and
 the **#wpadminbar** appears on smaller viewports.

 Absolute positioned elements are positioned within their direct containing
 box (e.g.: its direct parent element; see: [https://developer.mozilla.org
 /en-US/docs/Web/CSS/position#Description CSS Position]), so the current
 CSS doesn't work as expected since the margin-top is being applied to the
 html element, not the body.

 The solution for this would be to change the CSS to a compatible
 declaration replacing the code between the lines
 [https://core.trac.wordpress.org/browser/trunk/src/wp-includes/admin-
 bar.php#L1159 #L1159] and
 [https://core.trac.wordpress.org/browser/trunk/src/wp-includes/admin-
 bar.php#L1160 #L1160] with the following:

 {{{
 html { margin-top: 0 !important; }
 * html body { margin-top: 0 !important; }
 body.admin-bar { padding-top: 46px !important; }
 }}}

 Specifying padding-top here is important since if containing boxes of
 absolute positioned elements have margins, they are added to the offset of
 the absolute positioned element not absorbed by it.

 This bug was introduced in changeset:26072, but now that mobile editing
 has become more common, this is affecting the UX more when visiting the
 frontend while logged-in.

 Thanks in advance.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/51617>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform